Javascript 触发'；选定的'；关于动态填充选择选项

我有一个元素，使用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>

标准白色
经典论文
设计师论文
高级纸张

以及“定价”更改时运行的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);
}

函数paperPopulate（）{
变量类型=$（“#定价”）.val（）；
var standardPaper=[“标准白”，“臭白”]；
var classicPaper=['象牙光泽'，'愚蠢光泽']；
var designerPaper=[“白色平滑”、“白色垃圾”]；
var premiumPaper=[‘冰川水龙头’、‘沙漠臭味’]；
var数据=“”；
var纸张={标准：标准纸张，经典：classicPaper，设计师：designerPaper，高级：premiumPaper}；
美元。每份（论文、功能（学期、论文）{
if（类型索引of（术语）！=-1）{
对于（论文中的var i）数据+=''+论文[i]+''；
}
});
$（'#paper'）.html（数据）；
}

由于该属性从未添加，因此我运行以存储表单数据的服务器端代码从未检测到“纸张”选择所选择的内容

---

编辑：所以在仔细检查javascript之后，我看到页面本身理解选择了一个选项，但是属性不存在。这里的主要问题是服务器端代码（VB.NET）看不到所选的值。

如果在选择元素中未选择任何选项，则默认情况下会选择第一个选项，并在提交表单时将其与表单数据一起发布

如果要将任何选项设置为选中状态，请使用

val（）

jQuery方法将其选中，并传递要选择的选项的值

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

---

在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("...");

$（“#纸张”）.empty（）；
美元。每份（论文、功能（学期、论文）{
if（类型索引of（术语）！=-1）{
for（论文中的var i）{
//如果需要，您可以在此处选择该选项
$（“#纸张”）。追加(
$（“”，{value:papers[i]，text:papers[i]}）
);
}              
}
});
//也可以在此处设置所选值
美元（“#纸”）.val（“…”）；

在执行过程中，我应该使用.val（）处理程序处理什么事件？我是在#paper.change（）上运行它，还是使用.live（）监听任何更改？是的，我知道我可以在代码中的任何地方设置它。我在问什么时候我会应用这个值。我是否应该在select上收听更改？在选项上单击。单击（）？我假设有各种各样的方法来处理这个问题，但我不知道哪种方法是最好的。最好的方法是在您更新这个select元素的选项项之后。现在您知道何时更新此元素的选项并在那里执行。这很有帮助，但是如果我附加，每次更改时都需要清除select。也就是说，这会修复select没有检测到更改并应用selected属性的问题吗？我不想只是在javascript中手动设置一个值，我希望select的行为像普通select一样。点击下拉列表，单击一个选项，让它在单击后具有“selected”属性，然后让服务器检测它。老实说，我不确定，但这是一种使用jQuery向select添加选项的“已接受”方式。我正在修改我的答案，以向您展示如何清除选项。