<select name='main'>
<option value='For Sale'>For Sale</option>
<option value='Community'>Community</option>
</select>
<select name='sub'>
<option value='Animal'>Animal</option>
<option value='Fish'>Fish</option>
</select>
<select name='sub'>
<option value='Friend'>Friend</option>
<option value='Relitive'>Relitive</option>
</select>
<select name='sub2'>
<option value='Animal Thing'>Animal Thing</option>
<option value='Fish Thing'>Fish Thing</option>
</select>
<select name='sub'>
<option value='Best Friend'>Best Friend</option>
<option value='Relitive Home'>Relitive Home</option>
</select>
This is my html code and I want that when the user selects the main menu it will then show the sub menu and when the user selects the sub menu it will then show sub2 menu. I want to do this with Jquery, can someone help me with this?
I'm supposing that the sub and sub2 classes are disabled / hidden?
You want to check if the user has selected a value in the main.
You can find this in the Jquery documentation :selected Selector
So now you can see if you're main select was selected and then you can use this to enable to next select sub
If you want furthermore details on Selector, I think this question How to check if an option is selected? has some solid answers.
Cheers!
Related
I'm trying to make a <select> where the first <option> is empty, it is not visible in the dropdown and not selectable.
I've been researching for like 4 hours. I saw so many working options but the thing is that none of them (or at least what I've found) are working on Safari.
This is my code:
<select class="custom-select" formControlName="subindustryName">
<option *ngFor="let subindustry of subIndustries" [value]="subindustry.value">
{{subindustry.label}}
</option>
</select>
I'm not using jQuery.
would this work for you? you can set style properties for an option and disable the field so it's not selectable anymore. this question seems to have been answered with another post. default empty option.
<select>
<option disabled selected value style="display:none"></option>
<option value="one">one</option>
<option value="two">three</option>
</select>
Just add option with value undefined to force angular to select that value. like below
<select class="custom-select" formControlName="subindustryName">
<option value="undefined"></option>
<option *ngFor="let subindustry of subIndustries"
[value]="subindustry.value">{{subindustry.label}}</option>
</select>
and with if you want to it to be not selectable then add 'disabled' attribute with that.
EDIT AS PER COMMENT
so whatever you pasted in question should work.
Here is my code snippet which is working..
<div class="form-group">
<label class="col-md-3 control-label">Gender</label>
<div class="col-md-3">
<select id="gender" class="form-control" [(ngModel)]="userModel.gender" name="gender" required >
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
Just try with template driven approach for 'subindustryName' and check.
<option disabled selected value>Select Option</option>
<option value="one">one</option>
<option value="two">two</option>
In both Safari and Chrome, default disabled selected value is this.
if you use like.
<select>
<option> Select Option </option>
<!-- replace above code with -->
<option value='' selected> Select Option </option>
</select>
Hope this will work.
On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!
<option selected="selected">Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
Just change
<select required>
<option value="" selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Users can never submit the default option.
You could have the Select one option be both selected and disabled, like this.
function validate(self) {
console.log(self.value);
}
<select onchange="validate(this)" required>
<option disabled selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
The onchange event will trigger whenever a new value is chosen in the dropdown.
The selected tag makes sure its the default option.
The disabled tag makes sure it can't be chosen as an actual option.
The required tag prevents the form from submitting if the dropdown value is still its default.
The "select one" text should really not be an option, but instead a label
<label>Select One:</label>
<select>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
I am trying to select an option in a select menu that contains an optgroup. I have tried
document.getElementsByName("dob_year")[0].selectedIndex = "1980"; and it seems to work with select menus that contain no "optgroups", bit it does work with them. How can I select the "1980" option?
<select name="dob_year">
<optgroup label="Morning">
<option value="1980">80</option>
<option value="1981">81</option>
<option value="1982">82</option>
<option value="1983">83</option>
</optgroup>
</select>
As the name suggest, the selectedIndex is an index.
So you have to use the following:
document.querySelector('select').selectedIndex = 2;
Working jsfiddle: http://jsfiddle.net/vkSKy/
I have a primary drop down list that has three values:
1 - select
2 - Fail
3 - pass
the page is populated from the database, so here you could have anything from 1 to 50 dropdown to set the status of each record as fail or pass.
I would like to select 'fail' from the primary dropdown, any dropdown's that are populated from database should set to the selection i have made as being 'fail'
hope someone can help.
thank you
Yas
You can do this using javascript or jquery.
OnChange of first dropdown, select all dropdown values accordingly.
EDIT:
For your reference, I have prepared an example. Refer LIVE DEMO
HTML:
<select class="dDown">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
JS:
$('.dDown').on("change", function() {
$('select').not('.dDown').val(this.value);
});
I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.