在HTML中傳遞隱藏的輸入字段選擇選項

有誰知道是否可以在HTML表單中使用<select><option>元素傳遞隱藏的請求參數？例如，如果用戶從<select>選項列表中選擇<option value="foo">foo</option>，我是否可以以某種方式傳遞隱藏值以及「foo」值，並將其作爲請求參數進行檢索？例如。 <input type="hidden" name="x" value="bar"/>將使我能夠在用戶選擇foo選項時從請求中獲取值「foo」和「bar」。在HTML中傳遞隱藏的輸入字段選擇選項

感謝

來源

2009-07-23 Andy Birchall

澄清。給你一個你想要的例子。 – EFraim 2009-07-23 08:27:08

請說明你想要的 – 2011-11-01 18:03:08

我澄清了我的問題。抱歉，格式不正確的HTML代碼元素之前未顯示。謝謝 – 2012-03-21 13:46:59

選擇列表既具有向用戶顯示的值，又具有在表單發佈中傳遞迴服務器的值。所以，你可以使用某種類型的分隔符的張貼價值得到發回兩個值，然後在這一點上分析它們：

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

但更重要的是將傳回的ID值，然後你可以用它來知道從數據庫中選擇哪些項目，還用它來查找第二相關項目：

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

您的數據庫可能是這樣的：

ID DisplayValue OtherData 
123 foo   bar  
124 foo2   bar2

來源

2009-07-23 08:38:51

有表單輸入type='hidden'，你可以更新使用onchange事件選擇降下來，然後它會與形式予以公佈。我懷疑你會想要在選擇下拉菜單中以相同順序爲隱藏輸入創建一個可能值的數組，然後使用select元素的selectedIndex屬性按索引訪問數組中的值。

來源

2009-07-23 08:26:32

謝謝戴夫，我認爲是Javascript，但最終決定反對它。我想使用純粹的HTML解決方案。 – 2009-07-23 16:11:13

這裏有一個替代SOLU假設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陣列擁有唯一但分組的名稱。

來源

2014-03-31 16:11:24

在HTML中傳遞隱藏的輸入字段選擇選項

回答

相關問題