Jquery dynamic options hide/show in select box - javascript

I have following simple Html code with SELECT with the same class forms with identical options values
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
I just want to do click on a dropdown dynamic show and hide value from ALL SELECT with one class.
jQuery.each($("select.gr-fields-select"), function(){
$(".gr-fields-select").change(function() {
if($(".gr-fields-select").val() != "") {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
$(".gr-fields-select option[value="+$(".gr-fields-select").val()+"]").hide();
} else {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
}
});
})
Please check the jdfiddle here:
https://jsfiddle.net/mhassan94/d6j3fpt2/3/
If a select one dropdown value, they hide from All dropdown but if a change select dropdown value they show previous value and hide the new value in All dropdown.
How is that better to achieve?

Is this what you want to do?
$(".gr-fields-select").change(function(){
var selectedValue = $(this).val();
$(".gr-fields-select").each(function(ind, item){
if($(item).find(':selected').value!=selectedValue){
$(item).find('option').each(function(index,option){
if(option.value!=selectedValue){
$(option).show();
}else{
$(option).hide();
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<br>
<label>Second</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<br>
If you need to hide the value selected in one particular select element,from all the values populated in rest of the select elements try this,
$(".gr-fields-select").change(function(){
var selectedValue = $(this).val();
var previousValue = $(this).data("new");
if(previousValue!=undefined){
$(this).data("old",previousValue);
}
$(this).data("new",selectedValue);
$(".gr-fields-select").each(function(ind, item){
if($(item).find(':selected').value!=selectedValue){
$(item).find('option').each(function(index,option){
if(option.value==selectedValue){
$(option).hide();
}
if(option.value==previousValue){
$(option).show();
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

So in the don't re-invent the wheel category. I'm thinking a multi select such as select2 might accomplish what you want alot easier than the multiple drop downs. select 2 even lets you limit your selection length if you only want two. I think with multiple drop downs there is alot to track. especially if you want more than two drop downs. What if they choose the selects out of order? run the snippet below to see a possible implementation using a multiselect
$(document).ready(
function () {
$("#multipleSelectExample").select2({
maximumSelectionLength: 2,
closeOnSelect: false,
allowClear: true
});
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css">
<select id="multipleSelectExample" data-placeholder="Select" multiple>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

Related

Selected value in dropdown lost after location script

I have this code that selects the country in a dropdown (that only contains 7 countries) through visitor IP, problem is that when a country is not found as an option the dropdown ignores any default selected values and just shows a blank space. I want to have a default selected value (in this case Belize) after the script is run.
Here is the script:
$.get("http://ipinfo.io", function (response) {
$('.country').val(response.country).attr('selected',true);
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="country">
<option value="BZ" selected>Belize</option>
<option value="GT">Guatemala</option>
<option value="HN">Honduras</option>
<option value="SV">El Salvador</option>
<option value="NI">Nicaragua</option>
<option value="CR">Costa Rica</option>
<option value="PA">Panama</option>
</select>
Thanks.
You can add a condition to check if the country is present in the select options
$.get("http://ipinfo.io", function (response) {
if($(".country option[value='"+response.country+"']").length > 0){
$('.country').val(response.country).attr('selected',true);
}
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="country">
<option value="BZ" selected>Belize</option>
<option value="GT">Guatemala</option>
<option value="HN">Honduras</option>
<option value="SV">El Salvador</option>
<option value="NI">Nicaragua</option>
<option value="CR">Costa Rica</option>
<option value="PA">Panama</option>
</select>

Jquery change multiple select buttons with a select button

I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/

Drop down changes automatically ( vise versa would be best )

I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>

Check if option is selected appear an other option value

I have something like :
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
I am trying to do, if Scrammer is selected in #BadReason select 1 week in #BanLength automaticly. 
try using change event BanReason and based on this value pass the desired value to BanLength and trigger the change.:
$("#BanReason").on("change",function(){
if(this.value == "scrammer"){
$("#BanLength").val("1week").trigger("change");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
On change event will help you to do this
$("#BanReason").on("change",function(){
if($(this).val() == "scrammer")
$("#BanLength").val("1week");
});
Added a Fiddle to this
Fiddle

How to set text a select html with jquery?

i founded more example about this, but when i try , it's not work.
$(window).load(function () {
$("#country").html('Please select in here');
});
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please see it and tell me "Why it's not working?".Thank guys
It's impractical to replace the whole content between <select id="country"> and </select> with 'Please select in here' ? If you just want to replace the first option's content, then try this.
$(window).load(function () {
//$("#country").html('Please select in here');
});
$(document).ready(function() {
//$("#country").html('Please select in here');
$("#country").find("option:first-child").html('Please select in here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Not quite sure what you want, but if you want to add another option just append/prepend new option into select like so:
$(window).load(function () {
$("#country").prepend('<option value="" selected>Please select in here</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please select in here:
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
You can't add text in the select. You need to add in front of it.
If you really want to add the text after load, put one more div in front of the select to control
I am not entirely sure what you are trying to do, but if you just want to change the default text, you probably are looking for something like this:
<select id="country">
<option value="None" selected>Please select in here</option> <!-- set the default selection -->
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
and then the JS to set a new value would be:
$(window).load(function () {
$("#country").val('China');
});
Bit confuse what you trying to achieve
To Pre append
$('#country').prepend('<option>Please select in here</option>');
To dynamically Select:
$('#country').val("None")
Add new Option:
$('#country').append(new Option('Foo', true));

Categories