CODEWITHSUNDEEP
javascriptjqueryhtml
12345GG
12345GG

Reputation: 3

Dropdown list does not trigger javascript function

I cannot get the following HTML to trigger my JS function:

HTML:

<table style="margin-bottom: 8px">
    <tr>
        <td>
            <label><b>Select Language:</b></label>
        </td>
        <td>
            <select class="dropdown" id="selectlanguage">
                <option id="enBtn">English</option>
                <option id="zhBtn">简体中文</option>
            </select>
        </td>
    </tr>
</table>

JavaScript:

 $("#enBtn").bind("click", function () {
    setLanguage("en");
      console.log("en");
  });

  $("#zhBtn").bind("click", function () {
    setLanguage("zh");
     console.log("zh");
  })

The setlanguage function works fine when I use the following HTML: 

<div>  
    <a href="#" id="enBtn">English</a>  
    <a href="#" id="zhBtn">简体中文</a>  
</div>

But it does not work when I try to trigger with the dropdown list.

Upvotes: 0

Views: 124

Answers (1)

schogges
schogges

Reputation: 459

If you are using a select/dropdown you have to bind the handler to the select/dropdown and listen for change.

$('#selectlanguage').change(setLanguage)

<select class="dropdown" id="selectlanguage">
  <option id="enBtn" value="en">English</option>
  <option id="zhBtn" value="zh">简体中文</option>
</select>

and the handler:

function setLanguage() {
  console.log($(this).val());
}

if you don't want to touch your already written setLanguage-function:

$('#selectlanguage').change(getLanguage)

function getLanguage() {
  console.log($(this).val());
  setLanguage($(this).val());
  //or handle what is in $(this).val() however you want to
}

Upvotes: 1

Related Questions