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.
Related
I have a multi-select drop down as following, where I have selected the multiple options.
<select class="select2 mysql_attr" id="mysql_attr" name="mysql_attr[]" title="Student " multiple >
<option value="0"> All</option>
<option value="1">Sub 1</option>
<option value="2">Sub 2</option>
<option value="3">Sub 3</option>
<option value="4">Sub 4</option>
</select>
I have a first option called "All". When this option is clicked i want all selected items should be deselected except this and if other options click this option should be deselect.
I Search a lot but din't find anything.
How can I accomplish this using Materialize?
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());
}
});
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
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