7

新しいアイデアが頭に浮かびました。誰かがこれを実装したのかもしれません。ドロップダウン リスト内にテキスト ボックスを追加する方法を取得しようとしています。

ドロップダウンリスト内に入力ボックスを追加したいということです。例えば ​​：

<select id='country'>
  <option value='USA'>USA</option>
  <option value='UK'>UK</option>
  <option value='Russia'>Russia</option>
  <option><input type='text' /></option> // Here I want to add dynamic country 
                                            using ajax but I am able to render
                                            this dropdown.
</select>

これを実行する方法について誰か考えがありますか? このドロップダウンの外でモーダル ボックスや入力ボックスを使用したくありません。ドロップダウン内に値を追加し、Enter キーを押して DB に追加したいだけです。サーバー側のコードについては心配していません。ドロップダウンのみをレンダリングできるようにしたい。

前もって感謝します。

4

5 に答える 5

7

いいえ、できません。オプションには、テキスト コンテンツ以外の要素を含めることはできません。

代わりに、いくつかのカスタム プラグインを確認するか、独自のプラグインを作成して、選択したものから div/spans をレンダリングすることをお勧めします。

許可されたコンテンツ 最終的にエスケープされた文字 (é など) を含むテキスト。

bootstrapのドロップダウンを使用したほんの一例です。必要に応じてカスタマイズしてスタイルを設定できます。

フィドル

こんな感じでちょっとしたカスタマイズ

$('.dropdown-menu li').click(function () {
     $('.dropdown-toggle b').remove().appendTo($('.dropdown-toggle').text($(this).text()));
 });
于 2013-06-21T05:04:51.340 に答える
1

input elementを追加することはできません。このため、 を追加できるdrop down elementを使用してカスタム ドロップダウンを作成できます。または、他の選択時に を追加して、近くに表示することができますul litext fieldother optiontext boxdrop down option

お気に入り

$('select').on('change',function(){
    if($(this).val()=='other')
    {
        $('#otherTextBox').show();
    }
    else
    {
        $('#otherTextBox').val('').hide();
    }
});
于 2013-06-21T05:05:36.790 に答える
0

私はまだこれを実装しようとはしていないので、100% 正しいかどうかはわかりませんが、select の上に隠し (display:'none'; を読む) 入力ボックスを配置できます。

HTML

<select id="country">
   <option value="INP">Input Value</option>
   <option value="USA">USA</option>
   <option value="MEX">Mexico</option>
   <option value="CAN">Canada</option>
</select><br/>
<input type="text" id="countryInput"/>

CSS

#countryInput{ display:'none';position:relative;top:-15px;}

jQuery を使用して、ドロップダウンから特定の値を選択するときに入力ボックスを表示します (他のすべての値を非表示にします)。

$(function(){
   $('#country').on('change',function(){
      if(this.val()==="INP"){
         $('#countryInput').prop('display','');
      } else {
         $('#countryInput').prop('display','none');
      }
   });
});

次に、必要に応じて結果をドロップダウンに追加する関数を記述します。

于 2016-10-06T20:29:36.270 に答える