如何获取多个选择下拉框的值

时间:2018-03-30 03:53:05

标签: javascript jquery

我怎样才能获得这个多选下拉框的价值?我无法弄清楚如何获得价值。请帮忙。谢谢!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
    <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
  </head>
  <body>
      <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test" id="test">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option>
        <option>Spectacled Bear</option>
      </select>
      <input type="text" name="getvalue" id="getvalue">
      <input type="button" onclick="a()" value="Submit">
    <script>
    $(".chosen-select").chosen({
      no_results_text: "Oops, nothing found!"
    });

    function a() {
      var value = document.getElementById('test').value;
      document.getElementById('getvalue').value = value;
    }
    </script>

5 个答案:

答案 0 :(得分:2)

试试这个:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
    <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
  </head>
  <body>
      <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test" id="test">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option>
        <option>Spectacled Bear</option>
      </select>
      <input type="text" name="getvalue" id="getvalue">
      <input type="button" onclick="a()" value="Submit">
    <script>
    $(".chosen-select").chosen({
      no_results_text: "Oops, nothing found!"
    });

    function a() {
      var value = $('#test').val();
      $('#getvalue').val(value);
    }
    </script>

答案 1 :(得分:2)

JsFiddle Link

&#13;
&#13;
    $(".chosen-select").chosen({
      no_results_text: "Oops, nothing found!"
    });

    $("button").click(function() {
      a = $(".chosen-select").val();
      console.log(a);
    })
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://combinatronics.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://combinatronics.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet" />

<body>
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test" id="test">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option>
        <option>Spectacled Bear</option>
      </select>
  <input type="text" name="getvalue" id="getvalue">
  <input type="button" onclick="a()" value="Submit">
  <button>
click me
</button>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

您缺少在下拉列表中指定onchange事件。为了更好的结果,使用JQuery的.val()

&#13;
&#13;
$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
});

function a() {
  var value = $('#test').val();
  document.getElementById('getvalue').value = value;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
    <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test" id="test" onchange='a()'>
  <option value=""></option>
  <option>American Black Bear</option>
  <option>Asiatic Black Bear</option>
  <option>Brown Bear</option>
  <option>Giant Panda</option>
  <option>Sloth Bear</option>
  <option>Sun Bear</option>
  <option>Polar Bear</option>
  <option>Spectacled Bear</option>
</select>
<input type="text" name="getvalue" id="getvalue">
<input type="button" onclick="a()" value="Submit">
&#13;
&#13;
&#13;

答案 3 :(得分:1)

使用HTML尝试此功能:

const TextField = function<T>(p: { label: string, dataSource: T, propertyName: keyof T, disabled: boolean }) {
    return <div />;
}

let vm = {
    username :"",
    isSaving: true  
}

let text = <TextField
    label="Enter your user name"
    dataSource={vm}
    propertyName="username"
    disabled={vm.isSaving}
/>

// Will produce an error
let texterr = <TextField
    label="Enter your user name"
    dataSource={vm}
    propertyName="username2" 
    disabled={vm.isSaving}
/>

答案 4 :(得分:1)

对于下拉选项,您可能需要以下内容:

” var conceptName = $('#test')。find(“:selected”)。text();'