javascript - 如何动态获取选择标签的值？

Question

我想动态获取表单中选择标记的值。我实际上是这样做的

<select name="media_types_id" id="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<script>
    var option = $("#type option:selected").val();
    console.log(option);
</script>

但这会返回所选选项的值，并且当我更改表单中的选项时它不会改变。我选择 1，如果我选择 2 后它保持在值 1...

Answer 1

将事件绑定change到您的<select>元素并使用其值：

$("#type").on("change", function() {
    var option = this.value;
    console.log(option);
});

另请注意，应在加载 DOM 时完成事件绑定，因此要么将此代码放在前面，</body>要么使用$(function() { });处理程序。

Answer 2

尝试关注使用change()事件来获取下拉列表的选定值

$("#type").on("change",function(){
        var Option = this.val();
        console.log(Option);

});

Answer 3

但是您的代码在全球范围内运行。所以第一次，当页面加载时 1 是选定的值。

change在事件中尝试您的代码

IE

$('#type').on("change",function(){
    var option = $("option:selected",this).val();
    console.log(option);
});

Answer 4

您需要将更改事件绑定到您的选择列表：

<script>
  $(function() {
     $("#type").change(function() {
     console.log($(this).val());
    });
 });
</script>

Answer 5

使用事件处理程序。

每次发生某些事情时，事件处理程序都会调用一个函数。

纯JS

var option = document.getElementById("type").value;
document.getElementById("type").onchange = function(e) {
    option = this.value;
}

示例：http: //jsfiddle.net/howderek/FnT9T/3/