Question

以下选项由ajax调用动态添加。现在我想得到所选的值并进一步使用它。

<select class="form-control" name="product" id="product">
    <option value="1" selected="selected">sku_MOTOE</option>//added dynamically
    <option value="2">sku_C</option>//added dynamically
    <option value="3">sku_S2</option>//added dynamically
    <option value="4">sku_S5</option>//added dynamically
</select>

jquery的：

$(function() {
    $("#product").load("/bin/getcontent?type=options"); 
    console.log($("#product option:selected").val());//null
});

Answer 1

注意，.load()是一个异步函数调用。 .load()方法后面的语句会立即执行，因此您将获得null

您需要使用.load()的完整回调方法

请求完成时执行的回调函数。

脚本

 $("#product").load("/bin/getcontent?type=options", function(){
    console.log($("#product option:selected").val());
    //Or, console.log($("#product").val());
 });

Answer 2

您需要等待负载完成：

$(function() {
    $("#product").load("/bin/getcontent?type=options", function() { 
        console.log($("#product option:selected").val());
    });
});

load是异步的，因此下一行代码（console.log）在加载完选项之前运行。

您可以将函数/回调传递给load的“complete”参数，并在加载完成时调用该参数。

如何获取动态添加选项的选定值

2 个答案: