Question

背景资料：

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

问题

表单缺少下拉列表中的值（称为location_id）。因此，使用下面的代码作为示例，当表单发布时，我应该有＆＃34; location_id = 4＆＃34;

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会在下拉列表中显示正确的值。但是，当我使用＆＃34; Inspector＆＃34;检查基础HTML时在Firefox中的功能，我可以看到＆＃34;选择＆＃34;属性未设置。

所以不要这样:(注意＆＃34;选择＆＃34;属性）

<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代码根据值选择列表中的正确项目不能正常工作。但我不确定是什么错，因为它有点＆＃34;＆＃34;＆＃34;＆＃34;工作。

感谢。

编辑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())
    }
});

表格未在下拉列表

1 个答案: