web-dev-qa-db-ja.com

HTML選択オプションで非表示の入力フィールドを渡す

HTMLフォームの<select><option>要素を使用して非表示のリクエストパラメータを渡すことが可能かどうか誰かが知っていますか？

たとえば、ユーザーがオプションの<option value="foo">foo</option>リストから<select>を選択した場合、「foo」値だけでなく非表示の値も渡して、それをリクエストパラメータとして取得できますか？例えば。 <input type="hidden" name="x" value="bar"/>を使用すると、ユーザーがfooオプションを選択したときに、リクエストから値「foo」と「bar」を取得できます。

ありがとう

htmlhiddenhtml-select
8
Andy Birchall

選択リストには、ユーザーに表示される値と、フォームの投稿でサーバーに返される値の両方があります。したがって、投稿された値にある種の区切り文字を使用して、両方の値を返送し、その時点でそれらを解析することができます。

        <select id="myselectlist" >
            <option value="foo|bar">foo</option>
            <option value="foo2|bar2">foo2</option>
        </select>

ただし、ID値を返すことをお勧めします。この値を使用して、データベースから選択されたアイテムを確認し、それを使用して2番目の関連アイテムを検索することもできます。

        <select id="myselectlist" >
            <option value="123">foo</option>
            <option value="124">foo2</option>
        </select>

データベースは次のようになります。

ID   DisplayValue   OtherData   
123  foo            bar     
124  foo2           bar2
18
Jeff Widmer

JQueryが利用可能であると仮定した場合の代替ソリューションを次に示します。 jQuery以外のjsユーティリティライブラリを使用する場合、またはライブラリをまったく使用しない場合でも、これは可能です。関数をselectのonchangeイベントにバインドし、カスタムデータ属性からjsonを解析するだけです。

<form>
<select name="AnySelect">
 <option value="primary-value0" data-support='["test",128,2014,"blackberry"]' />
 <option value="primary-value1" data-support='["test1",39,2013,"apricot"]' />
 <option value="primary-value2" data-support='["test2",42,2012,"Peach"]' />
 <option value="primary-value3" data-support='[null,null]' />
 <option value="primary-value4" data-support='[30,28,null]' />
</select>
.
.
.
<span style="visibility: hidden" id="Support_AnySelect-container"><span>
</form>

^マークアップ------- JavaScript v

//bind onchange once document is loaded and ready
$.ready(function(){ $('#TheSelector').on('change',UpdateHidden); });

function UpdateHidden(event)
{
  //Create a base name for grouping dynamic values; ex: Support_AnySelect
  Name='Support_'+SelectField.attr('name');

  //Check if container was made for us already
  Contain=$(this.parent).find('#'+Name+'-container');

  if(Container.length===0)  //make the container if missing
  {
    $(this).after('<span id="'+Name+'-container" style="visibility: none;"></span>');
    Contain=$(this.parent).children('#'+Name+'-container');
  }

  //get our special multi-values, jQuery will auto decode the JSON
  SupportValues = this.data('support');

  Contain.empty(); //get rid of last select options
  $.each(SupportValues,function(i,val)
  {
    Contain.append('<input type="hidden" name="'+Name+'['+i+'] value="'+val+'"/>');
  });
}

これの主な利点は、理論的には、フォームから「可変量の変数」を投稿できることです。特定のネストされたオブジェクトを考慮してスクリプトを調整することもできます。有効なJSONを選択したデータ属性に渡す限り。

私がする前に誰かがこれを試してみたら、私に知らせてください。これは後でテストしますが、いくつかの小さなエラーが発生する可能性があります。これを任意のselect要素で使用でき、非表示の入力を別の要素内に自動的に入力できるはずです。スクリプトは、これらが同じフォームタグにあり、HTTP配列を介して一意であるがグループ化された名前を持つことも保証する必要があります。

3
Garet Claborn

フォーム入力がありますtype='hidden'selectドロップダウンのonchangeイベントを使用して更新すると、フォームとともに投稿されます。非表示の入力の可能な値の配列を、選択ドロップダウンの同等の値と同じ順序で作成してから、のselectedIndexプロパティを使用してインデックスで配列の値にアクセスすることをお勧めします。要素を選択します。

3
Dave Anderson

選択ドロップダウンの各オプションに非表示フィールドを使用する必要がある場合は、非表示フィールドに設定する代わりに、タグの独自の属性にその値を設定できます。

<option value="foo" fooData="foo|bar">foo</option>
<option value="foo2" fooData="foo2|bar2">foo2</option>
2
Foram Shah

ドロップダウン選択の代わりにラジオボタンを使用したい場合は、次のことがうまくいきました。

<label>Email:</label>


 {% for email in emails %}
 <input type="radio" id="{{ email.email_address }}" name="emaildata" value="{{ email.email_address }}">
 <label for="{{ email.email_address }}">{{ email.email_address }} </label>
 {% empty %}
 {% endfor %}

次に、ビューで、上記と同じデータを取得します。

email = request.POST.get("emaildata","")

幸運を！

0
ChameleonCoder