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:
$("#createAxiomSelect").find("option:selected").text()$("createAxiomSelect").val()$("#createAxiomSelect option:selected").text()document.getElementById("createAxiomSelect").innerHTMLThese all return "<option selected="" vale="true">True</option>"
Can someone please find where I am going wrong, thank you
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.
You can use document.forms['<formName>'].elements['<selectName>'].value.
Important: you should use name attribute, not id.
$("#createAxiomSelect option:checked").value