javascript - 表单未检测下拉列表中动态选择/分配的值

Question

背景信息:

我编写了一些逻辑，将下拉框从页面上的位置 A 复制到表格中的新位置。 我(尝试)从下拉列表中选择一个值...然后当提交表单时，该值应包含在表单中。

问题

表单缺少下拉列表中的值(称为 location_id)。因此，以下面的代码为例，当发布表单时，我应该有“location_id=4”

Jquery 代码:

这是复制下拉列表并尝试选择正确值的代码:

//edit button handler   
    $(".edit").click(function(e){
            e.preventDefault(); //don't submit the form <input type="image"> is also treated as submit trigger
            var location_id = this.id;
            var menu = $( "#location_id" ).clone(); //clone the global list
            //locate the associated "location_name" field for the selected row & hide the column    
            var location_name=$(this).parent().siblings().children("#location_name").hide();
            var row_name = $(this).parent().siblings().children("#name").hide();
            //replace location_name with the new menu
            $(location_name).replaceWith(menu);
            menu.find('option').each(function(i, opt) {

                    // OFFENDING LINE OF CODE???
                    if($(opt).attr('value') == location_id.toString()) $(opt).attr('selected', 'selected');
            });

            //change row name to input box for editing
            var input = $(document.createElement('input'));
            $(input).attr('type','text');   
            //$(input).attr('name','edit_row_name');
            $(input).attr('value', $(row_name).text());

            //replace exiting row_name with this new input box. 
            $(row_name).replaceWith($(input));
            //show save button
            var save_btn = $(this).siblings(".icon").show();
    });

当此代码完成运行时，GUI 在下拉列表中显示正确的值。但是，当我使用 Firefox 中的“检查器”功能检查底层 HTML 时，我可以看到“selected”属性未设置。

所以不要像这样:(注意“selected”属性)

<select tabindex="1" name="location_id">
 <option value="0">-- NONE --</option>
 <option value="1">WWX</option>
 <option value="2">Canada</option>
 <option value="3">USA</option>
 <option value="4" selected="">NYNY</option>    
</select>

我会得到这样的东西:

<select tabindex="1" name="location_id">
 <option value="0">-- NONE --</option>
 <option value="1">WWX</option>
 <option value="2">Canada</option>
 <option value="3">USA</option>
 <option value="4">NYNY</option>    
</select>

但 NYNY 将是下拉列表中显示的值。当您单击下拉菜单时，它会在列表中突出显示 NYNY。

因此，根据值在列表中选择正确项目的 JavaScript 代码似乎无法正常工作。 但我不确定出了什么问题，因为它“有点”起作用。

谢谢。

编辑 1

这是我编辑之前表格的样子 http://pastebin.com/dXXFDrmd

这是添加自定义逻辑后呈现的 html: http://pastebin.com/kxbU0fYZ

Answer 1

selected 属性不会自动设置。它更适合用于预先选择一个选项。要获取当前选定的选项，请使用:

// Get value 
$('#select-box').find(":selected").val();

// Get text 
$('#select-box').find(":selected").text();

来自 jQuery :selected文档。

要按值选择选项，只需在父项上调用 .val(value) 即可。

menu.find('option').each(function(i, opt) {

    if ($(opt).val() == location_id.toString()) {
        menu.val($(opt).val())
    }
});