如何使用jQuery,JavaScript和HTML动态设置下拉列表的选定选项?

出于某种原因,我不能让这个工作.

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

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,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为预选.这件事也没有.

如何获得“选择为真”而不是“defaultSelected true”?

编辑:事实证明,由于decezerosscj2533的答案的帮助,上面的代码完美地工作.它不适合我的唯一原因是,我发现Ruby代码覆盖了select元素.

感谢大家的帮助,

干杯

解决方法

defaultSelected属性不可设置,仅供参考:

Quote

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');

即设置要选择的选项的选定属性.

在不尝试修复代码的情况下,我大致会这样做:

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;
}

你似乎已经有很多行李和依赖,我无法告诉你如何最好地将选定的选项集成到你的代码中而不会看到更多,但希望这会有所帮助.

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...