I am manipulating a select, which before I show is got more than one selected option. After my code just one stays selected, but because I removed the previous selected the select is showing the default instead of the next selected.
<body>
<select id="test">
<option value="1">1 month</option>
<option value="2" selected="selected">2 month</option>
<option value="3" selected="selected">3 month</option>
</select>
</body>
And javascript
$('#test option[value=3]').remove();
Example here: example
Is this expected? In the console the option 2 in the example will still have the selected attribute.
It seems its the default behavior. When you mark multiple with selected it will make the last one in the list the selected one. After removing the selected item, it will select the first one all the time. No matter if any other items have selected attribute or not.
Tested in chrome(38.0.2125.104 m), firefox 31 and ie10. Same behavior everywhere.
Also note that select will pic kthe latest option with select attribute containing whatever.
In case you have:
<select id="test">
<option value="1">1 month</option>
<option value="2" selected="selected">2 month</option>
<option value="3" selected="false">3 month</option>
</select>
Last one will be picked still. Its same for 0, empty string or whatever you put there.
Here a fiddle with test and a workaround :
http://jsfiddle.net/s8j7t2g5/9/
The attr of the option is still selected but the val of the select is wrong.
$("#test option").each(function () {
if($(this).attr("selected") == "selected")
{
$('#test').val($(this).val());
}
});
Related
I have a select option in my form that has different values each time but is always 4 options.
Here is my code (PS: remember option values, changes for each time)
<select name="selectoption" id="selectoption" selected>
<option value="2623">option1</option>
<option value="8982">option2</option>
<option value="1237">option3</option>
<option value="9362">option4</option>
</select>
How can I remove the first and second options from my option list?
I have tried with:
$("#selectoption option:selected").remove();
But it just removes the first option (option 1), and I want first 2 options to be removed or in other word, I want to choose which options needs to be removed.
Use :lt(aka lower than) selector:
$("#selectoption option:lt(2)").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectoption" id="selectoption" selected>
<option value="2623">option1</option>
<option value="8982">option2</option>
<option value="1237">option3</option>
<option value="9362">option4</option>
</select>
It will remove the option tags with index=2 or lower, therefore the first two elements.
I want to have a <select> element that's default chosen option is "____". In other word's, blank.
When the drop-down is focused, I want the "____" option to not be in the options that can be selected. That way the user has to choose something other than "____" as their option.
Does that make sense?
Illustrations
Closed:
Opened:
As you can see, the option "___" is not in the list when it is being selected. That is my desired end result.
I've tried using onFocus events to remove options, but that just unfocuses the element, and replaces the default option with another one.
You can leverage the hidden attribute in HTML. Try with this example
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check this fiddle or the screenshots below.
Before clicking:
After clicking:
To hide the default option, allowing the others to show, there are a few ways to go.
Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...
In the past when I have needed to do this, I have set their disabled attribute, like so...
$('option').prop('disabled', true);
I've then used the hiding where it is supported in browsers using this piece of CSS...
select option[disabled] {
display: none;
}
CSS is your friend, set display:none for the option you want to hide.
<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>
Here's an extra with jQuery that will ensure the first option of any select is invisible:
$('select:first-child').css({display:none;});
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));
UPDATE: I was trying lots of different methods for doing this and none of them worked... until... I changed my dropdown menu name from (date-range) to (dateRange) removing the (-), sorry for wasting time!
I have a search form and a custom reset form button, which resets all the values in the form. I now have a dropdown menu and when the reset button is pressed, I want the first option to be selected.
This is my form:
<select name="date-range" id="date-range">
<option value="Any">Any date</option>
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="1 Week">Within 1 Week</option>
<option value="1 Month">Within 1 Month</option>
<option value="3 Months">Within 3 Months</option>
<option value="6 Months">Within 6 Months</option>
<option value="1 Year">Within 1 Year</option>
</script>
... and this is my javascript function that now needs to select the first dropdown value "Any".
function resetSearchForm()
{
document.searchFrm.searchStr.value='';
document.searchFrm.vertical.checked = true;
document.searchFrm.horizontal.checked = true;
** dropdown select first **
}
What is the proper way to do this? Any help gratefully received :)
This will work:
document.getElementById('date-range').selectedIndex = 0;
Example can be found here:
http://jsfiddle.net/yPmmG/3/
No javascript required, just add the selected attribute to the first option. That's what the attribute is for.
<option selected value="Any">Any date</option>
It is recommended that all select elements have one option with the selected attribute, that way there is always one selected by default. It will be the selected option when the page first loads and if the form is reset.
<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