Exists a method for click in label and select one specific option into select?
I don't like use JS
Follow the code:
<label for="a">State</label>
<select name="">
<option value="">teste</option>
<option value="">teste X</option>
<option value="" id="a">teste A</option>
</select>
Thanks!
html:
<label data-value="c">C</label>
<select name="" id="myselect">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
jQuery:
$(document).on("click", "label", function(evt) {
evt.preventDefault();
$("#myselect").val($(this).data("value"));
});
Related
there are dependent lists. How to add page links to cities?
<select name="country" id="country">
<option value="bra">Браpилия</option>
<option value="rus">Россия</option>
<option value="ind">Индия</option>
<option value="chn">Китай</option>
<option value="zaf">ЮАР</option>
</select>
https://jsfiddle.net/4tfmv601/
<select name="country" id="country" onchange="location = this.value;">
<option value="bra.php">a</option>
<option value="rus.php">b</option>
<option value="ind.php">c</option>
<option value="chn.php">d</option>
<option value="zaf.php">e</option>
</select>
You should create an event listener that listens to the country select for input.
This can be done as follows:
in JS:
country.setEventListener('change', selectCountry);
OR
country.onchange = selectCountry();
OR in plain HTML
<select onchange="selectCountry()" name="city" id="city">
I am a novice in JavaScript and jQuery. I provide my HTML code below. I want to make two group of selection in my <SELECT> tags; e.g. Central and Northern. Both <SELECT> tag will have different sub list. For instance, Central will have A, B and C. While Northern will have 1, 2 and 3.
I have do try and error by putting JavaScript code in my HTML as below, unfortunately nothing change and I thing it have problem somewhere. Please help me by correcting my code. TQ
At First Step, user will click whether Central or Northern.
Then system are able to different between Central and Northern. Both should have different list group.
In my case below, it is error somewhere, should be only One dropdown.
My Code as below
<label>Region :</label>
<select class="custom-select form-control">
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<label>Node Pair :</label>
<select onchange="getCentral(this)">
<option value="">Select Central</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select onchange="getNorthern(this)">
<option value="">Select Northern</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Somthing like this with jquery should do the trick:
In your <head></head> section put this:
<style>
.subCat {
display: none;
}
</style>
And in your <body></body> replace your html for this:
<label>Region :</label>
<select id="selRegion" class="custom-select form-control">
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<label>Node Pair :</label>
<select id="selCentral" onchange="getCentral(this)" class="subCat">
<option value="">Select Central</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="selNorthern" onchange="getNorthern(this)" class="subCat">
<option value="">Select Northern</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
$(function() {
$("#selRegion").change(function() {
$(".subCat").hide();
var val = $(this).val();
if(val == "central") {
$("#selCentral").show();
} else if(val == "northern") {
$("#selNorthern").show();
}
});
});
</script>
Hope this helped.
I have a HTML file with a simple drop down list.
Upon selecting one of the choices, I want the choice to be stored in a hidden input.
<div id ="mainContent">
<span style="font-size: 15px;"> Category : </span> <select id="selectid" name="filecategory">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br /><br />
<input type="hidden" name="filecategory" value="XXX" />
</div>
I did some research online and came up with this handler code upon detecting a change event in the drop down list.
$("#selectid").change(function(){
alert('change called');
});
Can someone tell me how I can set the hidden input via this handler ?
Solved here:
$("#selectid").change(function(){
$("input[name='filecategory']").val($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectid" name="filecategory">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<input type="hidden" name="filecategory" value="XXX" />
How can you run jQuery when any option group option is selected. In this case I want to make inputs show and hide based on when any option in one of the two option groups is selected.
HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
<input id="inputOne" type="text" placeholder="Input one"/>
<input id="inputTwo" type="text" placeholder="Input two"/>
JSFiddle
http://jsfiddle.net/u76eynap/2/
HTML
<select>
<option>Select</option>
<optgroup label="One">
<option value="1">Value 1.1</option>
<option value="2">Value 1.2</option>
<option value="3">Value 1.3</option>
</optgroup>
<optgroup label="Two">
<option value="4">Value 2.1</option>
<option value="5">Value 2.2</option>
<option value="6">Value 2.3</option>
</optgroup>
</select>
JS
$("#inputOne, #inputTwo").hide();
$('select').change(function () {
if ($("select option:selected").parent()[0].label == "One") {
$("#inputOne").show();
$("#inputTwo").hide();
} else if ($("select option:selected").parent()[0].label == "Two") {
$("#inputTwo").show();
$("#inputOne").hide();
} else {
$("#inputOne, #inputTwo").hide();
}
});
Try this :Initially hide input fields. Then get the parent of selected option and read its label. Using that label identify the input and make it visible
HTML:
<input id="inputOne" type="text" placeholder="Input one" style="display:none;"/>
<input id="inputTwo" type="text" placeholder="Input two" style="display:none;"/>
jQuery:
$(function(){
$('select').change(function(){
var $optionGroup = $(this).find('option:selected').closest('optgroup');
//use jquery start attribute selector to hide all inputs
$('input[id^=input]').hide();
//select input respective to selected optgroup and show it.
$('input[id=input' + $optionGroup.attr('label') + ']').show();
});
});
JSFiddle Demo
i have a dropdown in the header and whatever the value is selected in the header should reflect the same in the detail dropdown, how should i do that? any leads?
$("#myddl").change(function()
{
//update all the dropdown list...
});
http://jsfiddle.net/abuhamzah/4QvfP/
Header:
<br />
<select id="myddl" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<p>Detail</p>
<br />
<select id="Select1" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select2" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select3" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select4" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select5" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
Something along these lines will work. It wraps your "Detail" selects in a container to make selection somewhat simpler.
http://jsfiddle.net/qMXSR/2/
$("#myddl").change(function()
{
$('.detail').find('select').val($(this).val());
});
Use $.on to bind to the "change" event. From here we target all select elements whose id begins with Select - which includes all of those below. Then we set their value(s) to that of the current one.
$("#myddl").on("change", function(o){
$("select[id^=Select]").val(o.target.value);
});
This code will do it:
$(document).ready(function()
{
$("#myddl").live('change', function()
{
$("#Select1, #Select2, #Select3, #Select4, #Select5").val($(this).val());
});
});
The updated JS Fiddle is here: http://jsfiddle.net/leniel/4QvfP/7/
$(function(){
$('#myddl').change(function(){
var value = $(this).val();
$('select[name=myddl] option[value='+value+']').attr('selected', 'selected');
});
})
In the onchange of the first dropdown, you can jQuery select the other dropdowns and use a .each() to iterate and set the other options.