注册    登录
关注
Py学习  »  Jquery

如何使用jquery、javascript和html动态设置下拉列表的所选选项?

Eric Hunt • 6 年前 • 1669 次点击  

因为某种原因,我不能让这个工作。

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

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。这件事也不是什么。

如何获得“selected true”而不是“defaultselected true”?

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

谢谢大家的帮助,

干杯

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/30850
Reply
 
1669 次点击  
文章 [ 7 ]  |  最新文章 6 年前
Sairam Kukadala
Reply   •   1 楼
Sairam Kukadala    7 年前

在这里。 

// Select by value
$('select[name="options"]').find('option[value="3"]').attr("selected",true);

// Select by text
//$('select[name="options"]').find('option:contains("Third")').attr("selected",true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<body>
<select name="options">
      <option value="1">First</option>
      <option value="2">Second</option>
      <option value="3">Third</option>
</select>
</body>
</html>
SLaks
Reply   •   2 楼
SLaks    15 年前

您的语法错误。

你需要打电话 attr 有两个参数,如: 

$('.salesperson', newOption).attr('defaultSelected', "selected");

当前代码指定值 "selected" 变量 defaultSelected ,然后将该值传递给 收件人 函数,然后返回 selected 属性。

rosscj2533
Reply   •   3 楼
rosscj2533    15 年前

你的代码对我有用。什么时候 addSalespersonOption 打电话来?那个电话可能有问题。

还有一些HTML有点过时(可能是复制/粘贴问题?)但这似乎没有造成任何问题。您的选择应如下所示: 

<select id="salesperson"> 
    <option value="">(select)</option> 
</select>

而不是这个: 

<select id="salesperson" /> 
    <option value"">(select)</option> 
</select>

编辑:何时动态填充选项列表?你确定路过吗 'on' 对于 defSales 呼叫的价值 添加销售员选项 ?尝试将该代码更改为: 

if (selected == "on") { 
    alert('setting default selected option to ' + text);
    html = '<option value="'+value+'" selected="selected">'+text+'</option>'; 
}

看看警报是否发生,如果真的发生了怎么说。

编辑: Working example 我的测试(错误:未定义来自JSbin,而不是我的代码)。

Daniel McGrath
Reply   •   4 楼
Daniel McGrath    15 年前

请原谅我的无知,但你为什么要用 $('.salesperson') 而不是 $('#salesperson') 处理身份证时?

Hetal Vora
Reply   •   5 楼
Hetal Vora    15 年前

下面是另一种方法,您可以更改 <select> javascript中的元素。你可以用

document.getElementByID(“销售人员”)。selectedIndex=1;

将其设置为1将使下拉列表的第二个元素被选中。选择元素索引从0开始。

这是一个示例代码。检查是否可以使用这种方法: 

<html>
<head>
<script language="javascript">

function changeSelected() { 
document.getElementById('salesperson').selectedIndex=1;

} 

</script>
</head>
<body>
<form name="f1">

<select id="salesperson" > 
   <option value"">james</option>
   <option value"">john</option>  
</select> 
<input type="button" value="Change Selected" onClick="changeSelected();">

</form>
</body>
</html>
Tamilan
Reply   •   6 楼
Tamilan    8 年前

脚本 

 <script type="text/javascript">
    $(function(){
        $("#gender").val("Male").attr("selected","selected");
    });
 </script>

HTML 

<select id="gender" selected="selected">
    <option>--Select--</option>
    <option value="1">Male</option>
    <option value="2">Female</option>
</select>

Click Here More Details

deceze
Reply   •   7 楼
deceze    15 年前

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

Quote :

DefaultSelected属性返回所选属性的默认值。
如果默认情况下选择了某个选项,则此属性返回“真”,否则返回“假”。

我想你想要: 

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

即设置 selected 的属性 option 您要选择。

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

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

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

登录后回复
关于   移动版
Py学习 - 专注于Python技术发展的社区(原Django社区)
沪ICP备11025650号