选择框选定值显示在 div 内答案

【问题标题】：Select box selected value show inside div选择框选定值显示在 div 内
【发布时间】：2017-05-12 03:25:11
【问题描述】：

代码：

-> 要显示的选项“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>

这并没有给我想要的结果。

【问题讨论】：

你说的div在哪里？而且我没有看到您将价值放在任何地方...
它工作，一旦你删除斜线 - 它只是没有做任何事情。删除斜线，然后添加类似 console.log(id) 的东西，这样你就可以看到它确实做了一些事情。
或者，或者，让我们知道您希望它做什么。
代码不工作：/
哦，孩子。等待。您希望观看哪个#price？ When the select is changed, the change is triggered.为什么你有一个具有相同 ID 的 span？那永远不会改变！我很困惑。

标签： javascript jquery ajax select drop-down-menu

【解决方案1】：

说“代码不起作用”绝对没有任何作用。适合我，here it is as a fiddle。

$("#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。第二次编辑，以更改跨度的名称，并在每次更改选择时将信息附加到该跨度中。

【讨论】：

您期望的行为是什么。鉴于你告诉我们的，它正在做我告诉它做的事情。您是否希望选择的值出现在跨度中？
重新运行上面的 sn-p，我已经对其进行了编辑。
您的不同示例是根据下拉列表中的选择切换 div。您提供的 HTML 不支持这一点。如果您要做的只是显示数据，那么 Jonas 或我给出的答案几乎相同。我们都是对的。 ;)

【解决方案2】：

您可能想要显示结果？

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

<span id="showprice"></span>

【讨论】：