Develop Reference

Show option in second Select2 dropdown based on first value

I want to show only options in the second dropdown (child) attribute data-value based on first dropdown value (parent) after change, and hide the rest of options.
$('.custom_select').select2()
$('select[name=parent]').on('change', function(){
// show only options from child equals to this.val()
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
<option value="1">example 1</option>
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
<option data-value="1">child 1</option>
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>

You can get value of first select box and then compare it with option of second select box depending on that hide or show options i.e :
$('.custom_select').select2()
$('select[name=parent]').on('change', function() {
//getting value
var val = $(this).val();
//looping through options
$('select[name=child] option').each(function() {
var self = $(this);
if (self.attr("data-value") == val) {
//if the option have that values show option
$("select[name=child] option[data-value='" + val + "']").prop('disabled', false);
} else {
//other options which don't have selected value hide them
$("select[name=child] option:not(:contains('" + val + "'))").prop('disabled', true);
}
});
});
.select2-container--default .select2-results__option[aria-disabled=true] {
display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>

$(document).ready(function() {
$("#child").children('option:gt(0)').hide();
$('select').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
})
function setOption() {
var id=$("#parent").val();
$('#child').select2('destroy');
$("#child").children('option').hide();
$("#child").children("option[data-value^=" +id + "]").show();
$('#child').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="custom_select" name="parent" id="parent" onchage=setOption()>
<option value="1">example 1</option>
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child" id="child">
<option data-value="1">child 1</option>
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>

Show or hide value base on select value

Working on a site and I want to show/hide the values of a second based on the choices of the first .
I tried to play with Javascript, but I'm not good at it to be honest.
<select id="job_type">
<option value="1"><option> 1</option>
<option value="2"><option> 1</option>
<option value="3"><option> 1</option>
<option value="4"><option> 1</option>
</select>
<select id="function">
<option value="a" class="case_a"><option> show only when job_type = 4</option>
<option value="b" class="case_a"><option> show only when job_type = 4</option>
<option value="c" class="case_b"><option> show only when job_type =/= 4</option>
<option value="d" class="case_b"><option> show only when job_type =/= 4</option>
</select>
<script>
$(document).ready(function(){
$('#job_type').on('change', function() {
if ( this.value == '4') {
$(".case_a").show();
$(".case_b").hide();
} else {
$(".case_a").hide();
$(".case_b").show();
}
});
});
</script>

There are a few minor issues with your code. Please try the snippet below. There also were some extra tags
$(document).ready(function(){
$('#job_type').on('change', function() {
if ( $(this).val() === '4')
{
$(".case_a").show();
$(".case_b").hide();
}
else
{
$(".case_a").hide();
$(".case_b").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="job_type">
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
<option value="4">1</option>
</select>
<select id="function">
<option value="a" class="case_a"> show only when job_type = 4</option>
<option value="b" class="case_a"> show only when job_type = 4</option>
<option value="c" class="case_b"> show only when job_type =/= 4</option>
<option value="d" class="case_b">show only when job_type =/= 4</option>
</select>

<html>
<body>
<select id="job_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="function">
<option value="a" class="case_a">show only when job_type = 4</option>
<option value="b" class="case_b">show only when job_type = 4</option>
<option value="c" class="case_c"> show only when job_type =/= 4</option>
<option value="d" class="case_d">show only when job_type =/= 4</option>
</select>
<body>
<html>
And for JS:
map = {
"1": ["a", "b"],
'2': ["c"],
"3": ["a", "d"],
"4": ["b", "c"]
}
$(document).ready(function(){
$('#job_type').on('change', function() {
option = this.value
$("#function > option").each(function() {
if(map[option].includes(this.value)){
$('.' + this.className ).show();
}else{
$('.' + this.className ).hide();
}
});
});
})
The map objects maps the values from the first select to the second select, so you can alter the map object to fit your needs.

Your HTML is incorrect
<select id="job_type">
<option value="1"><option> 1</option>
<option value="2"><option> 2</option>
<option value="3"><option> 3</option>
<option value="4"><option> 4</option>
</select>
<select id="function">
<option value="a" class="case_a">show only when job_type = 4</option>
<option value="b" class="case_a">show only when job_type = 4</option>
<option value="c" class="case_b">show only when job_type =/= 4</option>
<option value="d" class="case_b">show only when job_type =/= 4</option>
</select>
Javascript
$(document).on('change', '#job_type', function(){
var val = this.value;
var groupA = $(document).find('#function option[class$=_a]');
var groupB = $(document).find('#function option[class$=_b]');
if(val == 4){
groupA.show()
groupB.hide()
}else{
groupA.hide()
groupB.show()
}
})

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185

Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle

Disable 3th, 4th dropdown list if 1st or 2nr are selected

I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks

I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>

select - how to sum values of selected options using jquery?

How to sum the selection options in multiple attribute? Any idea what might be the problem?
$(document).ready(function() { $('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('.select-from option:selected').change(function() {
var total = 0 ;
$('.select-to option:selected').each(function() {
total += parseInt($(this).value());
});
$("input[name=class]").value(total); }); });
I have a multiple selection list options
<select name="selectfrom" id="select-from" multiple size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Add »
« Remove
<select name="selectto" id="select-to" multiple size="5">
</select> <input type="text" name="class" value="" />

Try following code.
$(document).ready(function() {
$('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$("input[name='class']").val(parseInt($(this).val()) + parseInt($("input[name='class']").val()));
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
$("input[name='class']").val(parseInt($("input[name='class']").val() - parseInt($(this).val())));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectfrom" id="select-from" multiple size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Add »
« Remove
<select name="selectto" id="select-to" multiple size="5">
</select> <input type="text" name="class" value="0" />

You are using .value() instead of .val()
Change total += parseInt($(this).value()); to total += parseInt($(this).val()); and $("input[name=class]").value(total); to $("input[name=class]").val(total);