'Selected option returning tag not textual value

I have this bootstrap select element

   <select id="createAxiomSelect" class="form-select">
      <option selected vale="true">True</option>
       <option value="false">False</option>
    </select>

I am trying to get 'true' or 'false' when selected. Instead I am getting the tag "<option selected="" vale="true">True</option>"

I have tried many different ways to do this. eg:

  1. $("#createAxiomSelect").find("option:selected").text()
  2. $("createAxiomSelect").val()
  3. $("#createAxiomSelect option:selected").text()
  4. document.getElementById("createAxiomSelect").innerHTML

These all return "<option selected="" vale="true">True</option>"

Can someone please find where I am going wrong, thank you

javascripthtmljquerytwitter-bootstrapbootstrap-5


Solution 1:[1]

You can use document.forms['<formName>'].elements['<selectName>'].value.
Important: you should use name attribute, not id.

Solution 2:[2]

$("#createAxiomSelect option:checked").value

Solution 3:[3]

Assuming you are using jQuery since it does state that in the question: Item #2 is close. The correct syntax would be:

$("#createAxiomSelect").val();

See first the jQuery id selector requires '#'. .val() will simply return the value of the selected option.

Note, you have a spelling error in your first option vale= rather than value=. This will return instead the text of the option thus 'True' rather than 'true'.

Otherwise, I think you are on the right track. You can also do this using straight JavaScript, but since you are using jQuery, I'd suggest staying with that pattern and not mix and match.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user17517503
Solution 2 Tyler2P
Solution 3 iGanja

Related Questions