92

新しいサイトの構築に取り組んでおり、サイト内のアイテムの量を選択するドロップダウン メニューが必要です。しかし同時に、テキストを受け入れるためにこのドロップダウンリストが必要です。したがって、クライアントがドロップダウン リストから選択したい場合は選択できます。また、クライアントがテキストで金額を入力したい場合も同様です。ご覧のとおり、デュアルにしたいと思います。

例:amountドロップダウン メニューがあり、その要素が (1,2,3) であるとします。

ここで、クライアントが金額を 5 にする必要があるとします。これは彼の権利です。ドロップダウン リストには存在しないため、クライアントは金額をテキストで入力する必要があります。したがって、すべてのエントリについて、クライアントはドロップダウン リストから選択するか、テキストで金額を入力する必要があります。

私の問題の説明と、紹介した簡単な例の後、ここに私の質問があります。

ドロップダウン メニューとテキスト フィールドを 1 つにまとめて、分離せずに二重化する HTML コードはありますか?

4

9 に答える 9

47

オプション1

dhtmlgoodiesのスクリプトをインクルードし、次のように初期化します。

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 

createEditableSelect(document.forms[0].myText);

オプション 2

<select>これは、要素と<input>要素を組み合わせてスタイルを設定し、JavaScript を介して前後に切り替えるカスタム ソリューションです。

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>
于 2013-08-19T08:10:15.440 に答える
5

この質問とディスカッションは非常に役に立ち、最終的に得た解決策を示したいと思いました。これは @DevangRathod の回答に基づいていますが、jQuery を使用していくつかの調整を行ったので、完全にコメントされたサンプルを表示して、他の誰かが同様の作業を行っているのを支援したいと考えました。私はもともと HTML5 の data-list 要素を使用していましたが、ボックスに入力されたテキストと一致しないオプションがドロップダウン リストから削除されるため、そのソリューションには不満でした。私のアプリケーションでは、完全なリストを常に利用できるようにしたいと考えていました。

完全に機能するデモはこちら: https://jsfiddle.net/abru77mm/

HTML:

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS:

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

CSS:

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

私の実装を改善するためのコメントは歓迎します。誰かがこれが役立つことを願っています。

于 2016-07-05T05:03:29.390 に答える
1

jQuery トークン入力が好きです。実際には、上記の他のオプションよりも UI を好みます。

http://loopj.com/jquery-tokeninput/

説明については、 http: //railscasts.com/episodes/258-token-fieldsも参照してください。

于 2016-02-08T19:50:41.537 に答える