javascript - 如何选择动态添加的下拉列表的默认选项

Question

我使用 jquery 从服务器获取字符串：

<option value='1'>1</option><option value='2'>2</option>
<option value='3'>3</option><option value='4'>4</option>

然后我在 div 中创建一个下拉列表：

$.get('server.php', function(data) {
    $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
});

问题是，当我创建它时，我想选择一个选项：

$("#mysel").val("3");

但不起作用！如果我在调用此行之前添加警报，那么这有效！

alert('test');
$("#mysel").val("3");

找不到什么问题。

注意：我无法更改从服务器获取数据的方式。

Answer 1

您没有提供权利id。您选择的 id 是 mysel，您正在尝试在 mydiv 中选择一个选项。改变

$("#mydiv").val("3");

至

$("#mysel").val("3");

Answer 2

您需要使用get()' 回调。您可以使用success已有的：

$.get('server.php', function(data) {
    $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
    $("#mysel").val("3");
});

或者您可以使用done：

$.get('server.php', function(data) {
    $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
}).done( function() { "#mysel").val("3") });

编辑：实际上，与其在 dom 中添加一些内容然后对其进行修改，不如在插入之前进行修改。

$.get('server.php', function(data) {
    $mysel = $('<select id="mysel" name="mysel">'+data+'</select>').val("3");
    $("#mydiv").append($mysel);
});

Answer 3

$(document).ready(function(e) {
    $.get('server.php',{dataType:'text/html'}, function(data) {
         $('#mydiv').html('<select id="mysel" name="mysel">'+data+'</select>');
         $("#mysel").val("3");
    })
});

试试上面的代码；

Answer 4

尝试：

$("#mysel option:selected").val("3");

如果您想设置文本，请尝试：

$( "#mysel option:selected" ).text("3");

但是您必须在 DOM 树中创建下拉菜单后声明这一点。

Answer 5

您需要设置 selectedIndex 属性：

document.getElementById("mySel").selectedIndex = 3;

Answer 6

假设该行在...$("#mysel").val("3");之外$.get() {}

来自的响应$.get是异步的，因此在添加HTML元素之前$("#mysel").val("3");执行。<option>

添加alert()延迟执行足够长的时间<option>以在该场景中存在。

这里最简单的解决方案是移动身体$("#mysel").val("3");内部$.get() {}。

Answer 7

尝试这个

$(document).ready(function(){
   $("select#mysel option").each(function() { 
       if($(this).text() == '2')
          this.selected = true;
   });
});