Generate value of select box, based of value from other select box

Generate value of select box, based of value from other select box - javascript

I have two select box like this.
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option value="1">sub product 1</option>
<option value="2">sub product 2</option>
<option value="3">sub product 1</option>
<option value="4">sub product 1</option>
<option value="5">sub product 3</option>
</select>
I want to create auto generate values of second select box based on we chose from first select box, ex I choose product 1, the second select box will only contain sub product 1.

You can use a data attribute like data-parent in select2 for identifying which product's sub-product it is. Then in select1 change event you can use filter method and the data-parent attribute to hide and show options like following.
$('#select1').change(function() {
var parent = $(this);
var visibleOptions = $('#select2 option').hide().filter(function() {
return $(this).data('parent') == parent.val();
}).show();
if(visibleOptions.length)
visibleOptions.eq(0).prop('selected', true);
else
$('#select2').val('');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option data-parent="1" value="1">sub product 1</option>
<option data-parent="2" value="2">sub product 2</option>
<option data-parent="1" value="3">sub product 1</option>
<option data-parent="1" value="4">sub product 1</option>
<option data-parent="3" value="5">sub product 3</option>
</select>

You can use this code:
Here is the working example: https://output.jsbin.com/ronoteb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var options="";
$("#select1").on('change',function(){
var value=$(this).val();
if(value=="1")
{
options="<option>Select 2</option>"
+"<option value='1'>sub product 1</option>"
+"<option value='2'>sub product 2</option>";
$("#select2").html(options);
}
else if(value=="2")
{
options="<option>Select 2</option>"
+"<option value='3'>sub product 3</option>"
+"<option value='4'>sub product 4</option>";
$("#select2").html(options);
}
else if(value=="3")
{
options="<option>Select 2</option>"
+"<option value='5'>sub product 5</option>"
+"<option value='6'>sub product 6</option>";
$("#select2").html(options);
}
else
$("#select2").find('option').remove()
});
});
</script>
</head>
<body>
<select id="select1">
<option value="" selected>select</option>
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
</select>
</body>
</html>

To generate the dropdown on change of another select dropdown, you can initially, generate the object containing value and text to display for the second dropdown.
Then on change of first select dropdown value, you can iterate through the array and populate the second dropdown.
let selectOptions = {
1: [{
value : "1",
text: "sub product 1"
}],
2: [{
value : "2",
text: "sub product 2"
}],
3: [{
value : "3",
text: "sub product 3"
}]
}
$("#select1").change(function(){
let select2 = $("#select2");
select2.empty();
console.log(selectOptions[$(this).val()]);
selectOptions[$(this).val()].forEach(function(item){
select2.append($("<option />").val(item.value).text(item.text));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="1">product 1</option>
<option value="2">product 2</option>
<option value="3">product 3</option>
</select>
<select id="select2">
<option value="1">sub product 1</option>
<option value="2">sub product 2</option>
<option value="3">sub product 3</option>
<option value="4">sub product 4</option>
<option value="5">sub product 5</option>
</select>

Related

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>

Select children of optgroup only on tag click

I am attempting to use an optgroup label to select all of the option in the group.
This is working fine, however, when I also select a group <option> it selects all optgroup elements. How do I make it so selection is based on only the optgrouptag?
$(document).ready(function() {
$("optgroup").on("click", function() {
$(this).children("option").prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<optgroup label="Group1">
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</optgroup>
<optgroup label="Group2">
<option value="21">Option 1</option>
<option value="22">Option 2</option>
</optgroup>
</select>

check the tag name of the element since it will bubble.. loop thru each of the options and only check ones that are not checked.
$(document).ready(function() {
$("optgroup").on("click", function(e) {
if(e.target.tagName === 'OPTGROUP'){
$(this).children("option").each(function(){
this.selected = !this.selected;
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple size=6>
<optgroup label="Group1">
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</optgroup>
<optgroup label="Group2">
<option value="21">Option 1</option>
<option value="22">Option 2</option>
</optgroup>
</select>

Disable certain options in a drop down select

Need to disable option "5" & "6" when the option value "2" is selected. It should display all the options in the List_2 when option "1" is selected. How can I do that using jQuery or any other method.
if ($('option[value=2]').prop('selected', true)) {
$('option[value=5]').prop('disabled', true);
}
<HTML>
<body>
<select id= "List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id= "List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</HTML>

Here you go with a solution https://jsfiddle.net/eurbvzk1/
var disabledDic = {
"1" : ["6"],
"2" : ["4", "5"],
"3" : []
}
$('select#list_1').on('change', function(){
$('select#list_2 option').each(function(){
$(this).removeAttr('disabled');
});
var disableOption = disabledDic[$(this).val()];
$.each( disableOption, function(i){
$('option[value="' + disableOption[i] + '"]').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 2</option>
</select>
<select id= "list_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Create a dictionary that will contain each first select option as key & value will be list of disabled options from second list.
Onchange method check the dictionary & loop through the disabled value.
Hope this will help you.

With plain JS:
document.getElementById('List_1').onchange = function() {
document.getElementById('List_2')[1].disabled = (document.getElementById('List_1').selectedIndex == 1);
document.getElementById('List_2')[2].disabled = (document.getElementById('List_1').selectedIndex == 1);
}
<select id="List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>

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

Hiding the currently selected option

I am surrently having an issue using JQuery. I have 2 select fields.
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
And here is my JavaScript code
<script type="text/javascript">
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);
$("#cat").change(function(){
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
else{$(".cat_"+cat).show(0);}
});
</script>
Here is the problem. When I change the value of the cats select, the options for the subcats are changed correctly. However, the currently selected field is still showing (Even if it doesn't correspond to the current cat).
Any help would be greatly appreciated.

You should change your code a little bit so on the hange event it can add the selected attribute to the first element in the available options :)
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);
$("#cat").change(function() {
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if ($(".cat_" + cat).length == 0) {
$(".cat_0").attr("selected", "selected").show(0);
} else {
$(".cat_" + cat).eq(0).attr("selected", "selected");
$(".cat_" + cat).show(0);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>

Develop Reference

JavaScript is the programming language of the Web.

Generate value of select box, based of value from other select box - javascript

Related

Show option in second Select2 dropdown based on first value

Select children of optgroup only on tag click

Disable certain options in a drop down select

Connecting two Combo-boxes with html and js

Hiding the currently selected option

Categories

Resources