I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>
I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/
Related
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
Remove Select Option when user click on it like input field placeholder. Also not show in drop down.
<select class="name">
<option value="" style="display:none;">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
style="display:none;" should do the trick (Selected by default but not visible under options).
You can instated use <option value="" disabled selected>Select Option</option>
As the title says, Im trying to change the values on multiple dropdowns by changing a single dropdown. The multiple dropdowns need to get the same value that is selected in the "Select All" dropdown. Something very similar to a check all for checkboxes.
<select name="changeAll" id="changeAll" onchange="changeAll(this);">
<option value="select" selected="selected">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency1" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency2" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency3" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
The idea is that when a value is selected in the first dropdown "changeAll", all of the other dropdowns will have their values change to match the one selected in the "changeAll" dropdown.
Any help with this would be greatly appreciated.
Based on what you asked, I have tried to simulate. Try to run. Thnx
$('select#changeAll').on('change', function() {
var val_ = $('#changeAll :selected').text();
$('.child-changed option').map(function() {
$(this).text(val_);
$(this).value=val_;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select name="changeAll" id="changeAll" >
<option value="ca_select" selected="selected">Select</option>
<option value="ca_option1">ca Option 1</option>
<option value="ca_option2">ca Option 2</option>
<option value="ca_option3">ca Option 3</option>
</select>
<div>
</div>
<select id="currency1" class="form-control child-changed">
<option selected value="c1_option1_selected" disabled>currency1 Option 1</option>
<option value="c1_option1">currency1 Option 1</option>
<option value="c1_option2">currency1 Option 2</option>
<option value="c1_option3">currency1 Option 3</option>
</select>
<div>
</div>
<select id="currency2" class="form-control child-changed">
<option selected value="c2_option1_selected" disabled>currency2 Option 1</option>
<option value="c2_option1">currency2 Option 1</option>
<option value="c2_option2">currency2 Option 2</option>
<option value="c2_option3">currency2 Option 3</option>
</select>
<div>
I am attempting to select a dropdown option (out of several dropdowns on the page) by its value. I'm posting below code I think is relevant but if more is needed please let me know!
HTML
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>
jQuery
var example = ".option3";
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).click();
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
enter code here $('#Filters').find('.dropdowns').val(example).click();
This works, selects the correct dropdown option and the dropdown initiates the filtering process (I'm using MixItUp), but it deselects all other dropdowns making them blank instead of their default values, which should be (in this example) Default 1, Default 2, Default 3, etc. (except of course the dropdown that contains the correct value).
I'm hoping to have jQuery code find the dropdown option with the correct value (example = ".option3") but not affect the other dropdowns and make sure they're still on their default initial values.
I haven't been able to find answers to my problem anywhere so any help would be appreciated!
If I got your point you can use .find('option[value="'+example+'"]').prop('selected', true);
Demo
var example = ".option3";
$('#Filters').find('option[value="'+example+'"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>
find does not deselect your selects. val does.
What happens is, $('#Filters') finds the form object. Then .find('.dropdowns') finds all the select objects within it. Then .val(example) sets the value of all of those select objects to .option3. However, that value happens to be invalid for most of them.
What I assume you want is to find only the select objects that actually can take your value, and set the value for those only:
var example = ".option3";
$('#Filters').find('.dropdowns:has(option[value="' + example + '"])').val(example);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
(Hopefully your option values won't have crazy things like quotes inside them.)
Please find below solution, I hope this will help you.
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).prop('selected',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
You need to be more specific when selecting your dropdown.
Use the dropdown ID to select it, then choose a value using val(), then trigger a click event, ei.:
var example = ".option3"; $('#Filters').find('.dropdowns #select2 ').val(example).click();
Otherwise you're assigning the value "option3" for all three dropdowns, which is why #select1 and #select3 look empty.
I have listing week days on my web page and every day have a select box as like below
<select name="day1" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day2" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day3" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
.
.
.
.
Here if i select any option from "day2" then how can i make all others select box value default or null, as well as if i select with "day1" then day2 and day3 should be default or null using jQuery
Just create a change listener on all select and change every element what is not() itself.
$("select").change(function() {
$("select").not(this).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="day1">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day2">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day3">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
I can't seem to get this to work...
<select id="selectBox">
<option value="A">Number 0</option>
<option value="B">Number 1</option>
<option value="C">Number 2</option>
<option value="D">Number 3</option>
<option value="E">Number 4</option>
<option value="F">Number 5</option>
<option value="G">Number 6</option>
<option value="H">Number 7</option>
</select>
$('#selectBox option[value=C]').attr('selected', 'selected');
Unless you are trying to do a multi-select list box, why not:
$('#selectBox').val('C');