获取 div html，其中包含在 jquery 中动态创建的 select 的 select 值

Question

我在jQuery中动态创建了一个带有选择选项的div。下面是一个示例。

<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>

0 是默认的选定值。

当我像这样$("#myDiv").html()得到div 的 html 时，它会得到以下内容。

<div id="myDiv">
<select id="mySelect">
<option selected value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>

它与上面的代码相同，这是正常的。

但是，当我将所选值更改为 2 时，$("#myDiv").html()仍然得到相同的代码。 0 仍然是所选值。

如何获取带有动态更改值的div 的 html？

Answer 1

你可以这样做：

$('#yourSelect option:selected').val()

Answer 2

也许是这样的：

function create_select(){
	var select=$('<select/>').attr('id','mySelect');
	var option0=$('<option/>').val(0).text('A').attr('selected', true);
	   select.append(option0);
	var option1=$('<option/>').val(1).text('B');
	  select.append(option1);
	var option2=$('<option/>').val(2).text('C');
	  select.append(option2);
	var option3=$('<option/>').val(3).text('D');
	  select.append(option3);
	$('#myDiv').empty().append(select);
}
function change_select_value(_new_val){
	$('#mySelect option').removeAttr('selected');
	$('#mySelect').val(_new_val).change();
}
$(document).on('change', '#mySelect', function(){    //conctruction for Dynamically created element
alert('change value to =>'+this.value);  //or  $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="myDiv"></div>
<input type="button" value="Create Select" onclick="create_select();" /></br>
<input type="button" value="Set option C (value=2)" onclick="change_select_value(2);" /></br>

Answer 3

$('#myDiv').find("#mySelect").change(function () {
alert($("#mySelect option:selected").text());
alert($("#mySelect option:selected").val());
});