Question

我有一个元素，我使用javascript + jQuery根据另一个select元素的值动态填充。我遇到了'纸'选择检测任何选项的问题。由于它们是动态添加的，我是否必须检测任何更改并手动强制“选定”属性？

这是标记：

<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）无法看到所选的值。

Answer 1

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

如果要将任何选项设置为选中，请使用val() jQuery方法选择它，将选项的值传递给select。

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

Answer 2

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

在动态填充的选择选项上触发“已选择”

2 个答案: