Select first drop down then display second drop down [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am new in javascript. I hope someone could help me with my question. I wanted my form to display another drop down once the first drop down is selected. The second drop down depends on which option is selected in the first drop down. Thanks!
<body>
<div class="control-group">
<label class="control-label" for="input01">Select</label>
<div class="controls">
<select name="client_orderid" id="options" onchange="showText()">
<option value="A"> A</option>
<option value="B"> B</option>
<option value="C"> C</option>
</select> <br>
<div class="control-group" id="showA" style="display:none;">
<select name="client_orderid" id="options" onchange="showText()">
<option value="blue"> blue</option>
<option value="green"> green</option>
<option value="yellow"> yellow</option>
</select>
</div>
<div class="control-group" id="showB" style="display:none;">
<select name="client_orderid" id="options" onchange="showText()">
<option value="sun"> sun</option>
<option value="sky"> sky</option>
<option value="tree"> tree</option>
</select>
</div>
<div class="control-group" id="showC" style="display:none;">
<select name="client_orderid" id="options" onchange="showText()">
<option value="dog"> dog</option>
<option value="cat"> cat</option>
<option value="fish"> fish</option>
</select>
</div>
</div>
</div>

Initially , display only 1st Dropdown hide others.
So on change of 1st show 2nd like
$("#1stDropdown").change(function(){
$("#2nsDropdown").show();
});
and so on

Some points to correct-
1-Put second dropdown hidden by default and display it on change of 1st dropdown.
2-Also call different function onchange of different select.
3-Id of all elements should be unique. If you want it to be same, use class instead
<div class="control-group">
<label class="control-label" for="input01">Select</label>
<div class="controls">
<select name="client_orderid" id="options1" onchange="showTexColor()">
<option value="A"> A</option>
<option value="B"> B</option>
<option value="C"> C</option>
</select> <br>
<div class="control-group" id="showA" style="display:none;">
<select name="client_orderid" id="options2" onchange="showTextNature()">
<option value="blue"> blue</option>
<option value="green"> green</option>
<option value="yellow"> yellow</option>
</select>
</div>
<div class="control-group" id="showB" style="display:none;">
<select name="client_orderid" id="options3" onchange="showTextAnimal()">
<option value="sun"> sun</option>
<option value="sky"> sky</option>
<option value="tree"> tree</option>
</select>
</div>
<div class="control-group" id="showC" style="display:none;">
<select name="client_orderid" id="options4" onchange="showText()">
<option value="dog"> dog</option>
<option value="cat"> cat</option>
<option value="fish"> fish</option>
</select>
</div>
</div>
</div>
Demo: http://jsfiddle.net/fqzturn4/

Firstly, pass the value selected to the function:
<select name="client_orderid" id="options" onchange="showText(this.value)">
Then, in the function, show or hide the appropriate div based on the value matching the element ID (I presume "A" should match "showA" and so on):
function showText(value) {
var elements = document.querySelectorAll('.controls .control-group');
var re = new RegExp( value + '$');
for (var i=0, iLen=elements.length; i<iLen; i++) {
elements[i].style.display = re.test(elements[i].id)? '' : 'none';
}
}
showText should only be used on the first select, not the others unless there is some logic that you haven't explained.

Related

How to get label text and selected value from checked radio button?

I am trying to get text and selected value from checked radio button and put it into variable. Trying to get something like "Is published" or if is other radio checked to be like "Is not In Review". This needs to be plain javascript - no jquery or any other framework.
<form>
<div class="filter-option">
<input type="radio" id="status" name="status" checked="checked"/>
<label for="status">Is</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple
data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="is_not" name="status"/>
<label for="is_not">Is not</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple data-
live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="contain" name="author"/>
<label for="contain">Contain</label>
<div class="searchFilter">
<input type="text" class="simpleSearch">
</div>
</div>
</form>
You give the select element an id, then use document.getElementById(id).value.
This should return the value of the selected option, which you can then use any way you want.
Using .text instead gives you the text shown to the user in the list (in this example they are the same).

Update dropdown dynamically while selecting a value - Ionic AngularJS

I am building a hyrbid app using Ionic and need the dropdown control to update its value while the user is selecting a value. This way the user does not have to click "Done" or tap elsewhere on the screen to update the dropdown. This will also enable the next control. Ideally the user would select a value, the dropdown would update and unlock the other dropdown.
DOM
<div class="col">
<label class="item item-input">
<span class="input-label">When</span>
<input type="date" id="date" name="date" ng-model="postData.when" required>
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$pristine}">
<div class="input-label">Location</div>
<select id="location" name="location" ng-init="postData.location=''" ng-disabled="subForm.date.$pristine" ng-model="postData.location" required>
<option value="" disabled hidden></option>
<option value="Denver Office">Denver Office</option>
<option value="DJ Basin">DJ Basin</option>
<option value="East Mediterranean">East Mediterranean</option>
<option value="Gulf of Mexico">Gulf of Mexico</option>
<option value="Houston Office">Houston Office</option>
<option value="Marcellus">Marcellus</option>
<option value="Texas">Texas</option>
<option value="West Africa">West Africa</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$untouched || subForm.location.$untouched}">
<div class="input-label">Observation</div>
<select id="observationList" name="observationList" ng-disabled="subForm.date.$untouched || subForm.location.$untouched" ng-model="postData.category" required>
<option value="" disabled hidden></option>
<option value="Caught Between">Caught Between</option>
<option value="Dropped Object">Dropped Object</option>
<option value="Fall from Height">Fall from Height</option>
<option value="Personal Protective Equipment (PPE)">Personal Protective Equipment (PPE)</option>
<option value="Slip / Trip / Fall">Slip / Trip / Fall</option>
<option value="Strain / Overexertion">Strain / Overexertion</option>
<option value="Struck by">Struck by</option>
<option value="Spill / Release">Spill / Release</option>
<option value="Safe Work Practices">Safe Work Practices</option>
<option value="NO HARM">No Harm</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</div>
I have tried using the different angular validation check properties such as $untouched, $pristine, etc. But each one waits for the dropdown to lose focus.

Dropdown display output

I have 2 dropdown, What I need is when a user select an option from the 2 dropdown. When a user clicks the button GO, it will display it selected option respectively
I want it to be like this, I'm only using label for better understanding
<label for="bl" class="control-label col-xs-3"><p class="left">Branch:</p></label><p>Branch A</p>
<label for="bl" class="control-label col-xs-3"><p class="left">Category:</p></label><p>Stock</p>
my brand dropdown is actually php.
Well here's my dropdown
<div class="col-xs-8">
<div class="req">
<select name="bid" class="form-control">
<option value="" default style="color:gray;">Branch</option>
<option value="brancha">Branch A</option>
<option value="branchb">Branch B</option>
<option value="branchc">Branch C</option>
</select>
</div>
</div>
<div class="col-xs-8">
<div class="req">
<select name="brcat" class="form-control">
<option value="" default style="color:gray;">Category</option>
<option value="Stock">Stock</option>
<option value="Sales">Sales</option>
<option value="Stock Transfer">Stock Transfer</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default bt" style="align:right;">Go</button>
You can use jQuery Selectors to search and match the elements in a document. For example, you can get the value of an element by using ID Selectors when you add an id to it:
$('#go_btn').on('click', function(){
var branch = $('#branch_opt option:selected').val();
var category = $('#category_opt option:selected').val();
$('#branch_div').html('Branch : '+branch);
$('#category_div').html('Category : '+category);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="branch_opt">
<option value="">Branch</option>
<option value="brancha">Branch A</option>
<option value="branchb">Branch B</option>
<option value="branchc">Branch C</option>
</select>
<select id="category_opt">
<option value="">Category</option>
<option value="Stock">Stock</option>
<option value="Sales">Sales</option>
<option value="Stock Transfer">Stock Transfer</option>
</select>
<input type="button" id="go_btn" value="Go">
<div id="branch_div"></div>
<div id="category_div"></div>
I am having a hard time determining what it is your trying to accomplish. If I am understanding your question, you want to have a particular option on your drop down selected?
<option value="" selected="yes" style="color:gray;">Category</option>

Append Select Value to Title

I am trying to append the select value for each div to its heading. How can I grab the value within each div then append it?
I want to append this on page load and not wait until a click or change takes effect. Here is a jsfiddle https://jsfiddle.net/dqfvyvdt/2/
Markup: Repeated multiple times and each box will have a different selected value.
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option selected="selected" value="car">Car</option>
<option value="car">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
JS:
var title = $('.module').find('h3');
var type = $('.module').find('.type').val();
$(title).append(type);
$('.module').find('.type').val() gets the value of the first type element, you need to find the value of each type in relation to the h3 element.
So you need to iterate over the h3 and find each one's type value and add it to its contents
Use .append()
$('.module h3').append(function(i, text){
return $(this).next().val()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>
If you want to update the content of change also then
$('.module .type').change(function(i, text) {
var $this = $(this);
$this.prev().find('.h3-type').text($(this).find('option:selected').text());
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>

Show/Hide toggle not working with select name for database output

This was originally pointed out and solved this morning, but then I had to add name="region_option" to the select element so that it would output the value into a SQL query. The database/query stuff is all good, however I could not get the Show/Hide to work properly with the regions once again. I'm stuck at getting it to work with the select having the name="region_option".
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="bodytype">
<h2>Bodytype</h2>
<input class="bodytype--owls" name="bodytype_option" type="radio" value="owls">Owls</input>
<input class="bodytype--others" name="bodytype_option" type="radio" value="others">Others</input>
</div>
<div class="country">
<h2>Pick country</h2>
<select name="country_option">
<option value="not-selected">Select the country</option>
<option value="England">England</option>
<option value="Scotland">Scotland</option>
<option value="Ireland">Ireland</option>
<option value="Wales">Wales</option>
</select>
</div>
<div class="not-selected">
<h2>Notice!</h2>
<p>Please select a country to be able to pick the region.</p>
</div>
<div class="regions" id="England">
<h3>Pick region in England</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="Midlands">Midlands</option>
</select>
</div>
<div class="regions" id="Scotland">
<h3>Pick region in Scotland</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<div class="regions" id="Ireland">
<h3>Pick region in Ireland</h3>
<select name="region_option">
<option value="Northern">Northern</option>
<option value="Republic">Republic</option>
</select>
</div>
<div class="regions" id="Wales">
<h3>Pick region in Wales</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<br /><br />
<button class="identify__button">Identify</button>
jQuery
$(document).ready(function(){
$('#England, #Scotland, #Ireland, #Wales').hide();
$('.country_option').change(function() {
$('.not-selected, #England, #Scotland, #Ireland, #Wales').hide();
$('#' + $(this).val()).show();
});
});
I would love to know what I'm missing to fix this, and why did it not work in the first place. I have taken the liberty to put it in a CodePen for ease of convenience.
Thanks in advance.
You have a selector for class=country_option when it is actually name=country_option.
try
$('[name="country_option"]').change(function() {
JSFiddle: http://jsfiddle.net/mvt0982x/
Or better yet (to be more obvious):
$('select[name="country_option"]').change(function() {

Categories

Resources