在動態填充的選擇選項上觸發'selected'

我有一個元素，我基於另一個使用javascript + jQuery的select元素的值動態填充。我有問題的'紙'選擇檢測任何選項被選中。由於它們是動態添加的，我將不得不檢測任何更改並手動強制「選定」屬性？在動態填充的選擇選項上觸發'selected'

這裏的標記：

<select name="pricing" id="pricing"> 
    <option value="Standard White">Standard White</option> 
    <option value="Classic Paper">Classic Paper</option> 
    <option value="Designer Paper">Designer Paper</option> 
    <option value="Premium Paper">Premium Paper</option> 
</select> 
<select name="paper" id="paper"></select>

而且這#pricing'變化時運行的JavaScript函數：

function paperPopulate() { 
    var type = $('#pricing').val(); 
    var standardPaper = ['Standard White', 'Smelly White']; 
    var classicPaper = ['Ivory Gloss', 'Silly Gloss']; 
    var designerPaper = ['White Smooth', 'White Garbage']; 
    var premiumPaper = ['Glacier Faucet', 'Desert Stink']; 
    var data = ''; 
    var papers = {Standard:standardPaper, Classic:classicPaper, Designer:designerPaper, Premium:premiumPaper}; 
    $.each(papers, function(term, papers) { 
     if (type.indexOf(term) !== -1) { 
      for (var i in papers) data += '<option value="'+ papers[i] +'">'+ papers[i] +'</option>'; 
     } 
    }); 

    $('#paper').html(data); 
}

因爲屬性從不增加，服務器端的代碼，我跑到店表單數據從不檢測'紙張'選擇的內容。

編輯：所以在javascript中檢查兩次後，我發現頁面本身理解選擇了一個選項，但屬性不存在。這裏的主要問題是服務器端代碼（VB.NET）無法看到選定的值。

來源

2012-03-29 Scott O.

你的服務器得到什麼？ – Th0rndike 2012-03-29 15:30:57

它沒有返回 – 2012-03-29 15:37:13

如果您未選擇select元素中的任何選項，則默認情況下會首先選擇第一個選項，並在提交表單時將其與表單數據一起發佈。

如果要將任何選項設置爲選中狀態，請使用val() jQuery方法來選擇它，並將選項的值傳遞給select。

$('#paper').val('valueToSelect');

來源

2012-03-29 15:27:21 ShankarSangoli

我在什麼時候使用.val（）處理程序？我在＃paper.change（）運行它，還是使用.live（）來偵聽任何更改？ – 2012-03-29 15:28:58

您可以在代碼中的任何位置進行設置。 – ShankarSangoli 2012-03-29 15:31:50

是的，我知道我可以在代碼中的任何地方設置它。我在問什麼時候應用這個價值。我應該聽取選擇的變化嗎？在option.click（）上？我假設有很多方法可以解決這個問題，但我不知道哪個最好。 – 2012-03-29 15:35:53

在jQuery中有更好的方法來做到這一點。假設#paper是你的選擇列表，這樣的事情應該工作：

$("#paper").empty(); 

$.each(papers, function(term, papers) { 
    if (type.indexOf(term) !== -1) { 
     for (var i in papers) { 
      //you can select the option here if needed 
      $("#paper").append(
       $("<option>", { value : papers[i], text : papers[i] }) 
      ); 
     }    
    } 
}); 

//you can also set the selected value here 
$("#paper").val("...");

來源

2012-03-29 15:30:40

這有幫助，但如果我追加我需要清除每次更改選擇。這就是說，這將解決選擇不檢測更改和應用選定的屬性？ – 2012-03-29 15:34:58

我不想只在javascript中手動設置一個值，我希望select的行爲像一個正常的選擇會。點擊下拉菜單，點擊一個選項，點擊它後，它有'selected'屬性，然後讓服務器檢測到它。 – 2012-03-29 15:39:21

我真的不確定，但這是「接受」的方式來添加選項使用jQuery的選擇。我正在修改我的答案，向您展示如何清除選項。 – 2012-03-29 15:39:27

在動態填充的選擇選項上觸發'selected'

回答

相關問題