Using option id to change value of an html table text element with jQuery-CodePudding

I want to change the value of an html table text element using a toggle and dropdown. When the option is selected, the HTML table text element should change numbers. Here is the html and jQuery I have so far.

<select name="subject" id="subject">
    <option value="option1"  id="xTest">Option 1</option>
    <option value="option2"  id="yTest">Option 2</option>
</select>

<table>
<tr>
<td id="testing">Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>

and the jQuery

<script>
    $(document).ready(function() {
        $("#xTest").click(function(){
           ("#testing").text("change"); 
        });
    })
    $(document).ready(funtion() {
        $(#yTest).click (function(){
           ("#testing").text("change2"); 
        });
    })
</script>

When selecting either dropdown (#xTest or #yTest), the value of #testing isn't changing. Do I need to add an a href attribute to the html? This wouldn't make sense to me, however, because I am not adding a link.

Any help would be much appreciated.

Thank you!

CodePudding user response：

Events are not supported cross browser on <option> elements. Instead use the change event on the <select> and use it's value to determine the text to display

$("#subject").change(function() {
  const txt = 'change '   (this.value === 'option1' ? 1 : 2)
  $("#testing").text(txt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="subject" id="subject">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<table>
  <tr>
    <td id="testing">Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

CodePudding user response：

Monitor <select> changes using jquery like this:

$('#subject').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();

     const text = 'change '   (this.value === 'option1' ? 1 : 2)
     $("#testing").text(text);


 });