Using Bootstrap 4 example html below, how can I extract the text from selected dropdown menu option with JS DOM or Jquery?
<select class="custom-select" id="inputGroupSelect01">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I know that I can fetch the value but not the text within <option></option> with something like this:
$("#inputGroupSelect01").change(function (){
alert($(this).val());
});
Let's assume the value is an ID and the text is a column in my database. I need to fetch this information to submit a PUT request with the ID and the text. Thanks for your help!
Simply add option:selected to your ID in jQuery:
$("#inputGroupSelect01").change(function (){
alert($("#inputGroupSelect01 option:selected").text())
});
Related
I have an input box
<input id="source" onchange="openDropdown(...)" >
Whenever I enter any text inside this input box a dropdown of suggestion appears. Now I want to automatically select the first suggestion using JavaScript, but can't find any way to do this.
REQUIREMENT: You need to only use input id to select the first suggestion. I don't know the onchange function.
NOTE:- I am not having any select element here.I am just having an
input element here.So the thing is that i just want to select the
first element in the dropdown which will open after we start typing in
that input box(& i don't know how this dropdown is coming.I just know
that some input box is there.)I am not having the full code.
try this code,By default I select option 3 but you can change it
function openDropdown(){
$("#lst option:first").prop("selected","selected")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="source" onchange="openDropdown()" >
<select id="lst">
<option value=1>option 1</option>
<option value=2>option 2</option>
<option value=3 selected>option 3</option>
<option value=4>option 4</option>
</select>
$("#source") .change(function () {
var abc = $('option:first-child',this) .text();
Please try this .Hope this will help You..
I'm very very new to jQuery. I Googled a lot before I'm asking, though it looks silly but for me its complicated.
I have a simple <select> list which has around 4 values like this image shown below.
Now at runtime, I want to hide the options and show based on index or value names in jQuery. How can I achieve this?.
My drop down box has a div region and simple select option with set of values. Please provide me a simple example.
Sample code
<Div ID = "abcd">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
In this how to hide Volvo/Opel at run time?... like i want to show and hide these options dynamically.
Like Ex: When a button is pressed i want to hide Volvo. Similarly if another button is pressed i want to display Volvo back.
if you would like to hide the whole select you should give your select or the div containing your select an id and then you can do like :
<div id="mySelect" >your select tag here </div>
$('mySelect').show(); // or $('mySelect').hide();
http://api.jquery.com/hide/
http://api.jquery.com/show/
if you would like to hide the option you can do like below :
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
To be more specific to your code :
<div id="abcd">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
title = 'volvo';
$("#mySelect option[value=" + title + "]").hide();
like in this post :
Hide options in a select list using jQuery
or remove it :
JQuery: Hide options of select according to option value
I have following select list from which user can select multiple option
<select size="6" onblur="validatevalumethod()" multiple="" id="valumethod[]" name="valumethod[]">
<option value="0">Select Asset</option>
<option value="OC">ORIGINAL COST</option>
<option value="OCUIP">ORIGINAL COST USING INDEXED PRICES</option>
<option value="RC">REPLACEMENT COST</option>
<option value="OCCR">ORIGINAL COST CONSIDERING REVALUATION</option>
<option value="OCUIPCR">ORIGINAL COST USING INDEXED PRICES & CONSIDERING REVALUATION</option>
<option value="RCCR">REPLACEMENT COST CONSIDERING REVALUATION</option>
</select>
I need to fetch the value selected by user in javascript but dont know how to do this please help me.
With jQuery you could do
$("#list option:selected").text(); to get the text of the selected option
$("#list option:selected").val(); to get the value behind the selected option
EDIT:
where #list is the id of your select tag
I think that the following solution is better to fetch VALUES :
$("#list option:selected").val();
Here's a very simple code that tells you how many you selected on every change:
For the Html Code:
<html>
<body>
<select multiple="true">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
​Use this jQuery Code:
$("select").change(function() {
alert($("option:selected").length);
});
Here's a live example:
http://jsfiddle.net/hesher/3M36e/
You can use pure javascript as in :
document.getElementById('valumethod[]').value
<select id="my-select">
<option value="1">This is one</option>
<option value="2" selected>This is two</option>
...
</select>
Is there a way to get the text value of the selected option?
$('#my-select').val();
gives me 2, i want to get This is Two instead.
How?
What you want is
Get the selector for finding the selected option in the select box
Use .text() on the selector.
$('#my-select option:selected').text();
See a working demo
Take the below HTML select for an example:
<select name="selValues" id="selValues">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
If we write the following jQuery statement:
$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??
Why is it like that?
Use
$("#selValues option[value='3']").attr('selected', 'selected');
Also a good article on
jQuery - Select elements - tips and tricks
The val() method gets or sets the selected text. You may want to use selectedIndex instead:
$('#selValues').get(0).selectedIndex=2;
When selecting options jQuery looks first at the value then at the text of an option. It also goes through options in order. So, $('#selValues').val('3') selects options 3 first, but right after that changes selection to option 4 (as it has the text "3"). Use a multiple select to see that in fact both options are selected
<select name="selValues" id="selValues" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
As of JQuery 1.4 this has now been made unambiguous. It will now select by value, not by text value http://jquery14.com/day-01#backwards
If you do need to still select by value then a suggested method is here