如何阅读所选项目'javascript函数中html下拉菜单的s值

How to read the selected item's value of a html dropdown menu in a javascript function

本文关键字：html 函数 下拉菜单 javascript 何阅读 选项 项目      更新时间：2023-09-26

我在html中有一个表单，它包含一个类似的下拉菜单

<form name= "gadget_selector">
    <select name= "gadget">
        <option value = 0> Something </option>
        <option value = 1> Something else </option>
        //etc..
    </select> 
</form>

我想访问像这样的javascript函数中所选选项的值

function someFunction(){
    //var option = value of selected menu option
}

我该怎么做？

var option = document.getElementById('gadget').value;

将gadget设置为选择的id，如下所示：

<select id="gadget" name="gadget">
        <option value = 0> Something </option>
        <option value = 1> Something else </option>
        //etc..
    </select>

将id分配给select box"小工具"：

   <select name= "gadget" id="gadget">
    <option value = 0> Something </option>
        <option value = 1> Something else </option>
        //etc..
    </select>

现在在javascript中获得如下所示的选定值：

function GetSelectedItem() {
     var option = document.getElementById('gadget').value;
    }

包括一个id attribute来选择元素，并按以下操作，我相信我会工作的，

var obj = document.getElementById("gadget");
alert(obj.value); // returns selected option value   (1st method)
var selectedOption = obj.options[obj.selectedIndex]; // returns selected option element
alert(selectedOption.value); // return selected option value (2nd method)

示例：http://jsfiddle.net/zUBpz/

首先，为<select>标记分配一个id。

<select id='gadget' name= "gadget">

然后，获取其值

if (document.getElementById('gadget')) {
  var val = document.getElementById('gadget').value;
  alert(val);
}

您可以通过id访问，如下所示：=

    <form name= "gadget_selector" >
        <select name= "gadget" id='sel'>
            <option value = 0> Something </option>
            <option value = 1> Something else </option>
            //etc..
        </select> 
    </form> 

    function getvalue(){
       if(document.getElementById('sel'))
       {
         alert(document.getElementById('sel').value);
         var option = document.getElementById('sel').value;
       }
    }

这里forms[0]是从页面顶部到底部从0开始的表单编号

function someFunction(){
    var option = window.document.forms[0].gadget.value;
}

老问题，但也许其他人也和我一样，所以我会添加我的解决方案：

最干净的方法是引用select字段，用模型支持select，并添加这样的观察程序：

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      myValueName: 123
    };
  },
  watch: {
    myValueName() {
      //
      // Will log "Value: 123" and "Value: 456" instead of 
      // "123" and "456".
      //
      console.log(this.$refs['mySelectRef'].selectedOptions[0].text);
    }
  }
}
</script>
<template>
  <select ref="mySelectRef" v-model="myValueName">
    <option :value="123">Value: 123</option>
    <option :value="456">Value: 456</option>
  </select>
</template>
<style>
</style>
相关文章：