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

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()方法声明是立即执行这样你得到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”参数，并在加载完成后调用它。