<select id='mySelect'>
<option value='FirstOption'>
Option 1
</option>
<option value='SecondOption'>
Option 2
</option>
</select>
I'd like to select the 2nd option based on the fact it has the word 'Second' in it's name.
What I've Tried
$('#mySelect').val('SecondOption');
Closest I've got. Obviously returns second option, but wouldn't work for 'AnotherSecondOption'
Try * attribute-contains-selector
$('#mySelect option[value*="Second"]').prop('selected',true);
Related
With regular html select menus, if you create an option element with selected and disabled attributes and give that option text, then that text will display in the select menu by default. Here is basic html:
<select name="myname">
<option selected disabled>Select one...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
This is what pages looks like:
But in the below isolated code, I demonstrate that Angular is intrusively not showing the option text:
https://github.com/lovefamilychildrenhappiness/DropDownNoShowDefaultValue
// app.component.html
<h1>Select Box does not show default value: </h1>
<app-select-box
[options]="collection"
></app-select-box>
// select-box.component.html
<select
[value]="value"
[disabled]="disabled">
<option selected disabled value="">Select one...</option>
<option *ngFor="let option of options">{{option}}</option>
</select>
What is causing Angular to disrupt the native html behavior of select boxes?
This is because your select value is bound to a variable called value which is undefined initially. As per the html, there is no option with a value of undefined, so nothing gets selected. Your Select one... option has an empty string value. So to fix this, initialize value in your component to an empty string.
value: string = '';
just put the option to be selected in the first place.
<option value="0">value to be selected<option>
<option value="1">next<option>
<option value="2">Continues<option>
I have a tough time with Materialize CSS and Select compoment.
Code goes like this:
<select id="selectCompId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
When i visit the form i always get either value 1, 2 or 3 based on some DB query. Now, if i get 2 i want to set selected on option number 2 as initial selection. I'm having issues doing so.
Tried doing this:
document.getElementById('selectCompId').value = '2' but it seems like it doesn't work with this materialize component or i'm doing it wrong.
Whole code can be found here:
https://jsfiddle.net/536Lu1xe/1/
Expected result:
Initial value set to desired value (let's say 2 in this case).
Solution -> https://jsfiddle.net/536Lu1xe/2/
At the bottom, under script tags:
var elem = document.querySelector('#selectCompId');
var instances = M.FormSelect.init(elem);
document.querySelector('#selectCompId option[value="2"]').setAttribute('selected', 'selected');
M.FormSelect.init(elem);
If I understand correctly, you want to programmatically select an option in a select box.
In order to do that, we have to select all the options in a select box and select the desired option. The challenge here is to define the option that needs to be selected. In this case, I'm using the index for this.
Let's see how that looks like in code.
let n = 1; // the index of the option that needs to be selected. In this case, we want to select Item 2 (the option at index=1)
// the following line will select the <select/> on the page
const select = document.querySelector('select');
// now we have to loop through all options and select the one at Index=1
select.querySelectorAll('option')[n].selected = true;
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
You need to add selected attribute to select:
<select>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
EDIT:
You'll also need to re-initialize Select after updating the value:
const elem = document.getElementById('select_id');
M.FormSelect.init(elem);
just like the title says...I have a combobox, whose options are filled with web service call, activated on the click event.
I need to handle that list and make an option of that list (just the one whose value starts with "-" not selectable).
The "-" works a separator between one option group and the second following one.
So let's say I have this combo:
<select id="authority" class="selectauthority" style="width: 300px;" onclick="DisableSpecificOption()" name="authority">
<option value=""> </option>
<option value="001">Federal Bureau </option>
<option value="003">Police </option>
<option value="-1">-</option>
<option value="004">Army </option>
<option value="018">Navy </option>
<option value="018">CIA </option>
<option value="018">NSA </option>
</select>
As far as I know make the option disabled should be enough...I tried several scripts but I wasn't able to obtain my goal.
My Fiddle
Thank you in advance
edit
Since I have to use it in more than one selector and function I wrote a general one.
Updated Fiddle
Hope it helps somebody
Try
$('#authority option[value="-1"]').attr("disabled","disabled")
or
$('#name option:contains("-")').attr("disabled","disabled")
So here is the thing:
I have a java app and it creates a group of selects based on a db. Also, if it happens that an element (let's call it product) has that value, it print the option with the selected attribute.
<select>
<option value="1">text1</option>
<option value="2" selected>text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
<option value="5">text5</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
</select>
What i want to do is set in blank (set a value of zero) to the selects that not has an element with a selected value.
If you know another form to set to blank a list (diferent from put a default empty element in every select), please let me know.
The way to do this without an empty option, is to set the selectedIndex to -1
$('select:not(:has(option[selected]))').prop("selectedIndex", -1);
FIDDLE
Demo $('option:not(:selected)').val(0); use :not and :selected and set the value to 0
I have a select element
<select id='bill_to'>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
If I do
$('#bill_to').find(':selected')
it returns the first option even though it is not selected.
If an option is selected
$('#bill_to').find(':selected')
works as expected and returns the correct option
What am I doing wrong? Is this a bug. This is driving me crazy.
I just want it to return [] if there is nothing selected
If there are no select option with selected attribute, first option will be the selected option by default. You can try adding another option to top that contains default value as follow.
<select id='bill_to'>
<option value='-1'>Select<option>
<option value='a634jhj2'>test#c.com<option>
<option value='agfd4ghj2'>test2#c.com<option>
<option value='asdf634jhj2'>tes3#c.com<option>
<option value='agf2342d4ghj2'>test4#c.com<option>
</select>
If nothing is selected you will get -1 and then you can proceed.
e.g. http://jsfiddle.net/fZv5t/
I have add closing tag of option "", without this I am having an empty option get inserted after each option in the dropdown. Issue can be seen in this Fiddle.
And the working example is on this Fiddle.
Try to add an empty option tag:
<select id='bill_to'>
<option></option>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
Here you will get empty string, like this:
$('#bill_to').find(':selected').val();
If you can't or don't want to add a dummy first <option>, as an alternative you can grab and test the selected attribute of the element returned by :selected, for example:
var selection = $('#bill_to').find(':selected');
var really = (selection.attr('selected') != null);
var selval = really ? selection.val() : ""; /* or null or whatever */