Dropdown list does not trigger javascript function

Question

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.

You have not bound anything to anchor ids enBtn2 and zhBtn2, right? And also you have setLanguage method in somewhere. Can you share those? — vahdet
– vahdet, Commented Jul 11, 2018 at 15:03
enbtn2 is my mistake, now i fix it. setlanguage i will delete it just as $("#zhBtn").bind("click", function () { console.log("zh"); }) it will never reach console.log("zh") — 12345GG
– 12345GG, Commented Jul 11, 2018 at 15:07
bind is deprecated in the latest version of jquery, use on instead and when binding to a dropdown, use change instead of click (I don't think you can register click events on the options) — Pete
– Pete, Commented Jul 11, 2018 at 15:14

schogges · Accepted Answer · 2018-07-11 15:28:03Z

1

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
}

edited Jul 11, 2018 at 15:28

answered Jul 11, 2018 at 15:10

schogges

4596 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

12345GG Over a year ago

so, how do i setLanguage("en") according to click #enBtn,? .change(setLanguage) does not specific enBtn orZhBtn

schogges Over a year ago

I updated my answer. Be aware of the value-property in each <option>

12345GG Over a year ago

setlanguage itself has parameter .i do not tend to rewrite setlanguage function..do you have a way do not touch setlanguage function and solve the problem.. for example, i click English in dropdown list and then language setup to english $("#enBtn").bind("click", function () { setLanguage("en"); console.log("en"); });

schogges Over a year ago

I updated again, so just put another function as handler in between your selects and setLanguage

Collectives™ on Stack Overflow

Dropdown list does not trigger javascript function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related