web-dev-qa-db-ja.com

「選択」/ドロップダウンHTMLリストに手動で値を入力しますか？

Windowsフォームアプリケーションでは、ドロップダウンセレクターリストを使用して、同じフィールドに代替値を入力するオプションもユーザーに提供します（開発者がコントロールでこのオプションを有効のままにした場合）。

これをHTMLでどのように実現しますか？リストからのみ値を選択できるように見えます。

ストレートHTMLでこれを行うことができない場合、Javascriptでこれを行う方法はありますか？

javascripthtmlselectdrop-down-menu
31
Pretzel

HTML5でできるようになりました

こちらの投稿をご覧ください カスタム値を入力するオプション付きのHTML選択フォーム

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

私は同じ基本的な問題に直面しました：HTML仕様で根本的に異なるものであるテキストボックスと選択ボックスの機能を結合しようとしています。

良いニュースは、 selectize.js がまさにこれを行うことです：

Selectizeは、テキストボックスとボックスのハイブリッドです。これはjQueryベースであり、タグ付け、連絡先リスト、国セレクターなどに役立ちます。

8
amorphic

これを行う最も簡単な方法は、jQueryを使用することです。 jQuery UI combobox/autocomplete

7
stian.net

ExtJS には、これを実行できるComboBoxコントロールがあります（およびその他のクールなもののホスト全体！）

編集：ここですべてのコントロールなどを参照します： http://www.sencha.com/products/js/

3
Moo-Juice

別の一般的な解決策は、ドロップダウンに「その他」オプションを追加し、選択すると非表示のテキストボックスを表示することです。次に、フォームを送信するときに、非表示フィールドの値にドロップダウンまたはテキストボックスの値を割り当て、サーバー側のコードで非表示の値を確認します。

例： http://jsfiddle.net/c258Q/

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;
}

サーバー側で、リクエストから「fruit」の値を読み取ります。

3
Shadow Wizard

私はShadow Wizardの答えが大好きです。この答えは実際にかなりの質問に答えます。私が使用しているこれに対する私のjQueryツイストはここにあります。 http://jsfiddle.net/UJAe4/

新しい値を入力すると、フォームは送信できる状態になり、バックエンドで新しい値を処理するだけで済みます。

jQueryは次のとおりです。

(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));

したがって、これを以下のhtmlに適用します。

<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>

ちょうどこのような：

$(function () {

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

});
1
pawelmech

Telerikにはコンボボックスコントロールもあります。基本的には、画像をクリックすると、事前に定義されたオプションのリストを含むパネルが表示される画像のあるテキストボックスです。

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

しかし、これはAJAXであるため、Webサイトで必要とするよりも大きなフットプリントを持っている可能性があります（「HTML」と言うため）。

0
Brad