I'm not very practical with jQuery/Javascript, I know how to do it if I specific manually every ID but I know that it's not a good approach to use.
I'm searching for a way, fully dynamic in jQuery, that if a select element (initially with an empty value) have an option selected (value not empty), it show the next select with the same class.
Ex.
That's the HTML:
<div id="sel1" class="sel" style="display: block;">
<select id="select1">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel2" class="sel">
<select id="select2">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel3" class="sel">
<select id="select3">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
And that's the CSS:
.sel {
display: none;
}
So, basically the page start with the first sel1 displayed.
If I select an option that have a value not empty (ex. Option1) it show me automatically the next div with class sel (id=sel2).
If I select an option not empty in the sel2, it show me automatically the next div with class sel (id=sel3)
If I select an option not empty in the sel3 it stop because there's no next div with class sel.
Maybe like so:
$('select[id^=select]').on('change', function(){
if($(this).val().length > 0) {
$(this).closest('div.sel').next('div.sel').css('display', 'block');
}
});
.sel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sel1" class="sel" style="display: block;">
<select id="select1">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel2" class="sel">
<select id="select2">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel3" class="sel">
<select id="select3">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
This would be it:
$('select').on('change', function(){
var nxt = $(this).parent('div').next(), // next element (div)
opt = $(this).val();
console.log( opt );
if( opt != '' ){
nxt.removeClass('sel');
} else {
nxt.addClass('sel');
}
});
.sel {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sel1" class="sel" style="display: block;">
<select id="select1">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel2" class="sel">
<select id="select2">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div id="sel3" class="sel">
<select id="select3">
<option selected value>Default Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
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'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/
I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.
This is my html code:
<form class="js-chose">
<div class="col-md-6 col-xm-12">
<div class="form-group js-select">
<label>Select a Market</label>
<select class="form-control">
<option value='' disabled selected>Chose a Market</option>
<%Item.all.each do |item|%>
<option value="<%=item.id%>"><%=item.name.capitalize%></option>
<%end%>
</select>
</div>
</div>
<div class="col-md-6 col-xm-12">
<div class="form-group">
<label>Enter Market with:</label>
<select class="form-control js-select">
<option value='' disabled selected>Chose a Company</option>
<%Company.where(user_id: current_user.id).each do |company|%>
<option value="<%=company.id%>"><%=company.name%></option>
<%end%>
</select>
</div>
</div>
</form>
In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.
Thank you. Please let me know if I wasn't clear enough.
Example that works with multiple select elements
Link to jsfiddle
var counter = $('.select').length;
$('.select').change(function() {
$.each($('.select'),function(i,e) {
var t = $(this);
if (t.val() == undefined || t.val() == '') {
$('#js-market').fadeOut();
return;
}
if (i+1 == counter) {
$('#js-market').fadeIn();
}
});
});
#js-market {
display: none;
}
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>
See this fiddle
You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.
HTML
<select id="mySelect1" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="demo"></div>
JS
function myFunction() {
if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
document.getElementById("demo").style.display = "block";
} else document.getElementById("demo").style.display = "none";
}
I have a form with 8 select (drop-down) fields. I need to the form to be successfully submitted only when at least 1 option from the 8 select fields has been selected. If none of the options is selected, I need an alert to pop-up when the user tries to submit without selecting at least one option.
I have no knowledge in javascript or php.
I hope I'm clear enough.
Thanks guys.
Here's a JSFiddle.
Here's the code:
<select class="dropdown1">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown2">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown3">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown4">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown5">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown6">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown7">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="dropdown8">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button class="submit-btn">Submit</button>
<script type="text/javascript">
$(".submit-btn").click(function(){
var dropdown_selected = false;
// Select all the selected dropdown values
var dropdown_values_arr = new Array();
dropdown_values_arr.push($(".dropdown1 option:selected").val());
dropdown_values_arr.push($(".dropdown2 option:selected").val());
dropdown_values_arr.push($(".dropdown3 option:selected").val());
dropdown_values_arr.push($(".dropdown4 option:selected").val());
dropdown_values_arr.push($(".dropdown5 option:selected").val());
dropdown_values_arr.push($(".dropdown6 option:selected").val());
dropdown_values_arr.push($(".dropdown7 option:selected").val());
dropdown_values_arr.push($(".dropdown8 option:selected").val());
// Loop over these values
for(var i=0; i<dropdown_values_arr.length; i++){
// If the value is not empty, then break the loop
// Condition is met: at least one dropdown is selected
if(dropdown_values_arr[i].length > 0){
dropdown_selected = true;
break;
}
}
// If there's no selected values in any of the dropdowns, then throw an alert message
if(dropdown_selected == false){
alert("Please fill at least one dropdown");
}
});
</script>
I do not quite understand your question, but if I'm correct, you want to check if something is selected in a drop-down box? (select)
Javascript (no JQ)
function checkdropdown() {
if(document.getElementById('select').value != "") {
return true;
}
else {
return false;
}
}
HTML code
<form action='file.php' action='post'>
<select name='select' id='select'>
<option value=''>Select an option</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
</select>
<input type='submit' onClick='if(!checkdropdown()) {alert("You need to select a value!"); return false;}' value='Submit form' />
</form>
jsfiddle: http://jsfiddle.net/KNd47/