选择框选择的框架内部

Question

代码：

->选项" ID"值

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$("#price").change(function() {
var id = $(this).children('option:selected').attr('id');
});
</script>
<td>
<select name="money" id="price" style="width: 100%">
<option value="Low" id="10">Low</option>
<option value="Middle" id="30" >Middle</option>
<option value="High" id="60" >High</option>
<option value="Highest" id="100" >Highest</option>
</select>
</td>
<td>
<span id="price"></span>
</td>

这不会给我带来理想的结果。

Answer 1

您可能要显示结果？

$("#price").change(function() {
 var id = $(this).children('option:selected').attr('id');    
console.log(id);
$("#showprice").html(id);
});
<span id="showprice"></span>

Answer 2

说"代码不起作用"绝对没有任何作用。对我来说正常工作，在这里，它是小提琴。

$("#price").change(function() {
  var id = $(this).children('option:selected').attr('id');
  $("#priceDisplay").append("<p>Price chosen: "+id+"</p>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
  <select name="money" id="price" style="width: 100%">
    <option value="Low" id="10">Low</option>
    <option value="Middle" id="30">Middle</option>
    <option value="High" id="60">High</option>
    <option value="Highest" id="100">Highest</option>
  </select>
</td>
<td>
  <span id="priceDisplay"></span>
</td>

编辑为包含jQuery，如指定。第二次编辑，更改跨度的名称，并每次更改选择时将信息附加到该跨度。