如何在jquery中控制选定的和默认的下拉值?

时间:2018-03-05 14:17:51

标签: jquery html-select console.log

我想控制我选择的下拉值onload,因为我正在使用下面的代码工作。但如果我从下拉列表中更改我的选择,那么我也希望在控制台中看到我当前选择的值。通过这个我可以得到我当前选择的值为我的下一个if else操作。

var s = document.getElementsByName('org_id')[0];
var value = s.options[s.selectedIndex].value;

console.log(value);

通过上面的代码我可以获得onload选择的值。但之后,如果我从下拉列表更改选择,我的控制台不显示当前选定的值。如何用jquery实现这一点。

<select name="org_id" id="org_id" class="required">
    <option value="">--Select Organization--</option>
    <option value="1">ABC</option>
    <option value="2">DEF</option>
    <option value="3">GHI</option>
    <option value="4">JKL</option>
    <option value="5">MNO</option>
</select>

1 个答案:

答案 0 :(得分:1)

您需要按照以下步骤操作:

  1. change事件监听器添加到<select>下拉列表中,该下拉列表将在更改option
  2. 时触发
  3. 然后,您需要在页面加载时显式调用此侦听器函数,以便您可以打印最初选择的值。
  4. &#13;
    &#13;
    var s = document.getElementsByName('org_id')[0];
    
    s.addEventListener("change", changeOrg);
    
    function changeOrg(){
      var value = s.options[s.selectedIndex].value;
      console.log(value);
    }
    
    //on page load
    changeOrg();
    &#13;
    <select name='org_id'>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    &#13;
    &#13;
    &#13;