web-dev-qa-db-fra.com

Saisir manuellement une valeur dans une liste HTML "Sélectionner" / déroulante?

Dans une application Windows Forms, une liste de sélection déroulante donne également à l'utilisateur la possibilité de saisir une autre valeur dans ce même champ (en supposant que le développeur a laissé cette option activée sur le contrôle).

Comment accomplit-on cela en HTML? Il semble qu'il ne soit possible de sélectionner que des valeurs dans la liste.

S'il n'est pas possible de le faire avec du HTML simple, existe-t-il un moyen de le faire avec Javascript?

javascripthtmlselectdrop-down-menu
31
Pretzel

Cela peut être fait maintenant avec HTML5

Voir cet article ici formulaire de sélection HTML avec option pour entrer une valeur personnalisée

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>
32
Pottsy

J'ai rencontré le même problème de base: essayer de combiner les fonctionnalités d'une zone de texte et d'une zone de sélection qui sont des choses fondamentalement différentes dans la spécification html.

La bonne nouvelle est que selectize.js fait exactement cela:

Selectize est l'hybride d'une zone de texte et d'une zone. Il est basé sur jQuery et il est utile pour le balisage, les listes de contacts, les sélecteurs de pays, etc.

8
amorphic

La façon la plus simple de le faire est d'utiliser jQuery: zone de liste déroulante jQuery UI/autocomplete

7
stian.net

ExtJS a un contrôle ComboBox qui peut faire cela (et tout un tas d'autres trucs sympas !!)

EDIT: Parcourez tous les contrôles, etc. ici: http://www.sencha.com/products/js/

3
Moo-Juice

Une autre solution courante consiste à ajouter l'option "Autre .." à la liste déroulante et lorsqu'elle est sélectionnée, afficher la zone de texte qui est par ailleurs masquée. Ensuite, lors de la soumission du formulaire, attribuez une valeur de champ masqué avec la valeur déroulante ou la zone de texte et dans le code côté serveur, vérifiez la valeur masquée.

Exemple: http://jsfiddle.net/c258Q/

Code HTML:

Please select: <form onsubmit="FormSubmit(this);">
<input type="hidden" name="fruit" />
<select name="fruit_ddl" onchange="DropDownChanged(this);">
    <option value="Apple">Apple</option>
    <option value="orange">Apricot </option>
    <option value="melon">Peach</option>
    <option value="">Other..</option>
</select> <input type="text" name="fruit_txt" style="display: none;" />
<button type="submit">Submit</button>
</form>

JavaScript:

function DropDownChanged(oDDL) {
    var oTextbox = oDDL.form.elements["fruit_txt"];
    if (oTextbox) {
        oTextbox.style.display = (oDDL.value == "") ? "" : "none";
        if (oDDL.value == "")
            oTextbox.focus();
    }
}

function FormSubmit(oForm) {
    var oHidden = oForm.elements["fruit"];
    var oDDL = oForm.elements["fruit_ddl"];
    var oTextbox = oForm.elements["fruit_txt"];
    if (oHidden && oDDL && oTextbox)
        oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value;
}

Et côté serveur, lisez la valeur de "fruit" de la requête.

3
Shadow Wizard

J'adore la Shadow Wizard answer, qui répond assez bien à la question. Ma torsion jQuery sur ce que j'utilise est ici. http://jsfiddle.net/UJAe4/

Après avoir tapé une nouvelle valeur, le formulaire est prêt à être envoyé, il suffit de gérer de nouvelles valeurs à l'arrière.

jQuery est:

(function ($) 
{
 $.fn.otherize = function (option_text, texts_placeholder_text) {
    oSel = $(this);
    option_id = oSel.attr('id') + '_other';
    textbox_id = option_id + "_tb";

    this.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>");
    this.after("<input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/>");
    this.change(

    function () {
        oTbox = oSel.parent().children('#' + textbox_id);
        oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide();
    });

    $("#" + textbox_id).change(

    function () {
        $("#" + option_id).val($("#" + textbox_id).val());
    });
};
}(jQuery));

Donc, vous appliquez ceci au HTML ci-dessous:

<form>
    <select id="otherize_me">
        <option value=1>option 1</option>
        <option value=2>option 2</option>
        <option value=3>option 3</option>
    </select>
</form>

Juste comme ça:

$(function () {

   $("#otherize_me").otherize("other..", "put new option vallue here");

});
1
pawelmech

Telerik dispose également d'un contrôle de zone de liste déroulante. Il s'agit essentiellement d'une zone de texte avec des images qui, lorsque vous cliquez dessus, révèle un panneau avec une liste d'options prédéfinies.

http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

Mais c'est AJAX, donc il peut avoir une empreinte plus grande que celle que vous voulez sur votre site Web (puisque vous dites que c'est "HTML").

0
Brad