如何使用jQuery，JavaScript和HTML动态设置下拉列表的选定选项? [英] How do I dynamically set the selected option of a drop-down list using jQuery, JavaScript and HTML?

问题描述

由于某种原因，我无法使它正常工作.

For some reason, I can't get this to work.

我的选项列表是使用以下脚本动态填充的:

My options list is populated dynamically using these scripts:

function addOption(selectId, value, text, selected) {
    var html = '<option value="'+value+'">'+text+'</option>';
    if (selected == "on") {
        html = '<option value="'+value+'" selected="selected">'+text+'</option>';
    }
    $('#'+selectId).append(html);
}

function addSalespersonOption(id, name, defsales) {
    addOption('salesperson', id, name, defsales);
}

这是HTML:

<td class="text-r"><label for="salesperson">Salesperson:</label></td>
<td>
    <select id="salesperson">
        <option value="">(select)</option>
    </select>
</td>

到目前为止，输出为:

<option value="1266852143634" selected="selected">Eric Hunt</option>

DOM显示如下:

index              2
disabled           false
value              "1266852143634"
text               "Eric Hunt"
selected           false
defaultSelected    true

但是由于某些原因，在加载页面时，下拉菜单不会将Eric Hunt显示为预先选择的内容.对此也没有任何东西.

But for some reason, when the page is loaded, the dropdown does not display Eric Hunt as pre selected. Nor is anything for that matter.

如何获取"selected true"而不是"defaultSelected true"?

How can I get "selected true" instead of "defaultSelected true"?

事实证明，由于 deceze 和 rosscj2533 的答案来自下面.它对我不起作用的唯一原因是，我发现Ruby代码覆盖了select元素.

As it turns out, the above code works perfectly, thanks to the help of deceze and rosscj2533's answers from below. The only reason it's not working for me is, I found Ruby code that was overwriting the select elements.

感谢大家的帮助，

欢呼

推荐答案

defaultSelected属性不可设置，仅用于提供信息:

The defaultSelected attribute is not settable, it's just for informational purposes:

报价:

defaultSelected属性返回所选属性的默认值.
如果默认情况下选中了一个选项，则此属性返回true，否则返回false.

The defaultSelected property returns the default value of the selected attribute.
This property returns true if an option is selected by default, otherwise it returns false.

我想你想要

$('option[value=valueToSelect]', newOption).attr('selected', 'selected');

即设置要选择的option的selected属性.

I.e. set the selected attribute of the option you want to select.

在不尝试修复代码的情况下，大致是我的处理方法:

Without trying to fix your code, here's roughly how I would do it:

function buildSelect(options, default) {
    // assume options = { value1 : 'Name 1', value2 : 'Name 2', ... }
    //        default = 'value1'

    var $select = $('<select></select>');
    var $option;

    for (var val in options) {
        $option = $('<option value="' + val + '">' + options[val] + '</option>');
        if (val == default) {
            $option.attr('selected', 'selected');
        }
        $select.append($option);
    }

    return $select;
}

您似乎已经有很多负担和依赖性，我无法告诉您如何在看不到更多内容的情况下将所选选项最佳地集成到您的代码中，但是希望这会有所帮助.

You seem to have a lot of baggage and dependencies already and I can't tell you how to best integrate the selected option into your code without seeing more of it, but hopefully this helps.

这篇关于如何使用jQuery，JavaScript和HTML动态设置下拉列表的选定选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！