Develop Reference

HTML Dropdown filter based on another dropdown selection

I tried dropdown filter based on another dropdown,
It's working If I don't use space in the value in option.
If I use space in value, then it's not working.
$("#Type").on("change", function() {
var values = $(this).val().split(',', ) //split value which is selected
$("#fruits option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#fruits option[value=" + vals + "]").show() //show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row last">
<div class="form-wrapper">
<label for="">Department</label>
<select id="Type" name="Type" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Diet 1</option>
<option value='Red Banana,Green Apple'>Diet 2</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
<div class="form-wrapper">
<label for="">Device</label>
<select id="fruits" name="fruits" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Apple</option>
<option value='Red Banana'>Banana</option>
<option value='Green Apple'>G Apple</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
</div>
Here If I select Apple value - Diet 1, it's working.
If I select Diet 2, it should show Banana and G Apple in second drop down.
Please help me how to get the Red Banana value from 1st dropdown and filter the second dropdown,

You weren't far off you just missing closing single quotation marts in this line:
before:
$("#fruits option[value=" + vals + "]").show() /
after
$("#fruits option[value='" + vals + "']").show() /
$("#Type").on("change", function() {
debugger
var values = $(this).val().split(',', ) //split value which is selected
$("#fruits option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#fruits option[value='" + vals + "']").show() //show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row last">
<div class="form-wrapper">
<label for="">Department</label>
<select id="Type" name="Type" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Diet 1</option>
<option value='Red Banana,Green Apple'>Diet 2</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
<div class="form-wrapper">
<label for="">Device</label>
<select id="fruits" name="fruits" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Apple</option>
<option value='Red Banana'>Banana</option>
<option value='Green Apple'>G Apple</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
</div>
I hope this helps

Biased on you follow up question here is an example of the second drop down bound to an array instead of being hard coded
var data = [{
'value': 'Apple',
'product': 'Green Apple'
}, {
'value': 'Grape',
'product': 'Fresh Grape'
}];
$(function() {
$.each(data, function(index, itemData) {
$('#fruits').append($("<option></option>")
.attr("value", itemData.product)
.text(itemData.value));
});
})
$("#Type").on("change", function() {
var values = $(this).val().split(',', ) //split value which is selected
$("#fruits option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#fruits option[value='" + vals + "']").show() //show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row last">
<div class="form-wrapper">
<label for="">Department</label>
<select id="Type" name="Type" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Fresh Grape'>Diet 1</option>
<option value='Blue Apple,Green Apple'>Diet 2</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
<div class="form-wrapper">
<label for="">Device</label>
<select id="fruits" name="fruits" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
</div>
I hope this helps

Open Another Input Text when the user selects an option

I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.

If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />

var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>

Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />

Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**

How to manipulate selected option's value to be the same as option text with JavaScript

I have this dynamic HTML / JavaScript form that is working great, but I found that when I click submit it is bringing over the value of the option as its index and not as the text within the option.
I have tried altering the JavaScript code but can not seem to figure out how to resolve this.
HTML
<!-- Category -->
<label for="type">Category<span class="required-input"> *</span></label>
<select id="type" name="type" onchange="ChangeTypeList()">
<option value="">--Select--</option>
<option value="Order Inquiry">Order Inquiry</option>
<option value="Product Inquiry">Product Inquiry</option>
</select>
<!-- Sub Category -->
<label for="reason">Sub Category</label>
<select id="reason" name="reason"></select>
JavaScript
var reasons = {};
reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
function ChangeTypeList() {
var typeList = document.getElementById("type");
var reasonsList = document.getElementById("reason");
var reasonsType = typeList.options[typeList.selectedIndex].value;
while (reasonsList.options.length) {
reasonsList.remove(0);
}
var decisions = reasons[reasonsType];
if (decisions) {
var i;
for (i = 0; i < decisions.length; i++) {
var decision = new Option(decisions[i], i);
reasonsList.options.add(decision);
// console.log('decision', decision);
}
}
}
When I select the first Category option 'Order Inquiry' and console.log:
console.log('decision', decision);
I see the following in the Console for the Sub Categories:
<option value="0">Order Status</option>
<option value="1">Order Issue</option>
<option value="2">X</option>
Ideally I want to see this is the Console for the Sub Categories:
<option value="Order Status">Order Status</option>
<option value="Order Issue">Order Issue</option>
<option value="X">X</option>

You need to pass decisions[i] as second parameter in Option.
Syntax:new Option(text, value, defaultSelected, selected); More details Option
var reasons = {};
reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
function ChangeTypeList() {
var typeList = document.getElementById("type");
var reasonsList = document.getElementById("reason");
var reasonsType = typeList.options[typeList.selectedIndex].value;
while (reasonsList.options.length) {
reasonsList.remove(0);
}
var reason = document.getElementById('reason');
var decisions = reasons[reasonsType];
if (decisions) {
var i;
for (i = 0; i < decisions.length; i++) {
//This line is changed
var decision = new Option(decisions[i], decisions[i]);
reasonsList.options.add(decision);
console.log('decision', decision);
}
}
}
<label for="type">Category<span class="required-input"> *</span></label>
<select id="type" name="type" onchange="ChangeTypeList()">
<option value="">--Select--</option>
<option value="Order Inquiry">Order Inquiry</option>
<option value="Product Inquiry">Product Inquiry</option>
</select>
<!-- Sub Category -->
<label for="reason">Sub Category</label>
<select id="reason" name="reason"></select>

option HTML element has a value and text attribute.
var options = document.getElementById("dropdown").children;
for (var i = 0; i < options.length; i++) {
options[i].value = options[i].text;
}
<select id="dropdown">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>

Selected option does not run script

I am using the HTML <select> for selecting options. The first value in my select is selected. For all of these options I have a javascript that runs different scripts.
When I change the value to 2 the javascript runs the script for value 2 (dataEl.value === "2") { outputEl.innerHTML = '<div>result option two</div>';
The script works only when the value is changed and does not show the script for value 1 when the selected option is not changed.
Does someone know how I can solve this?
Here is my script:
JSFiddle
https://jsfiddle.net/yua9vanz/
HTML
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control select2" id="select" name="select" style="width: 100%;">
<option selected="selected" value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
</div>
<p id="output1"></p>
<script type="text/javascript">
var dataEl = document.querySelector('#select'),
outputEl = document.querySelector('#output1');
dataEl.onchange = function() {
if (dataEl.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (dataEl.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (dataEl.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
};
</script>

This is what I meant:
var dataEl = document.querySelector('#select'),
outputEl = document.querySelector('#output1');
dataEl.onchange = function() {
if (dataEl.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (dataEl.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (dataEl.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
};
dataEl.onchange();
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control select2" id="select" name="select" style="width: 100%;" onchange="check()">
<option selected="selected" value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
</div>
<p id="output1"></p>

I think this is what you want, I modified the code a bit, but in summary, I just added the onload event in the element(#select).
var dataEl = document.querySelector('#select'),
outputEl = document.querySelector('#output1');
dataEl.addEventListener("load", check());
function check() {
if (dataEl.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (dataEl.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (dataEl.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
}
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control select2" id="select" name="select" style="width: 100%;" onchange="check()">
<option selected="selected" value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
</div>
<p id="output1"></p>

You should add onclick event (and optionally onkeypressto detect keyboard navigation).
Just to clarify what the selectedattribute does (source: W3C):
When present, it specifies that an option should be pre-selected when
the page loads.
The pre-selected option will be displayed first in the drop-down list.
So, if you want to run the script without user intervention, simply run it:
dataEl.onchange();

Another solution, though not ideal, is the following:
var dataEl = document.querySelector('#select');
showResult(dataEl);
dataEl.onchange = function() {
showResult(dataEl);
};
function showResult(selector) {
var outputEl = document.querySelector('#output1');
if (selector.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (selector.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (selector.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
}
All it does is call a function to get the selected value, both at page load and when the selected value changes.

3 Select Elements, But Produce 6 Value. Why?

I have this HTML structure :
<div id="kurir_list">
<div class="row">
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<select class="tarif full-width" data-init-plugin="select2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<select class="tarif full-width" data-init-plugin="select2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<select class="tarif full-width" data-init-plugin="select2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
</div>
</div>
and I have this jquery :
$(".tarif").change(function() {
$(".tarif").each(function() {
alert ($(this).val());
});
});
why the alert produce 6 times dialog box, instead of 3?
first : empty
second : either 1 or 2 of first select element
third : empty
fourth : either 1 or 2 of second select element
fifth : empty
sixth : either 1 or 2 of third select element
how to get exact value of selected element and ignore empty value? please note that this is not just HTML select, but it use Select2 plugins.
UPDATE : here's my complete javascript code
(function($) {
'use strict';
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
// If it's the last tab then hide the last button and show the finish instead
if ($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show().removeClass('disabled hidden');
} else if ($current == 2) {
if ($(".tarif").is(":disabled")) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').hide();
}
$(".tarif").change(function() {
if ($(".tarif").is(':disabled')) {
$('#rootwizard').find('.pager .next').hide();
} else {
var emptySelect = false;
$('#kurir_list select').each(function(){
if (!$(this).find('option:selected').val()) {
emptySelect = true;
}
});
if (emptySelect == false ) {
$('#rootwizard').find('.pager .next').show();
} else {
$('#rootwizard').find('.pager .next').hide();
}
}
$(".tarif").each(function() {
alert ($(this).val());
});
var selected_tarif = $(this).val();
var ongkir2 = $("#ongkir2").text();
ongkir2 = ongkir2.replace(/\D/g,"");
var new_ongkir2 = parseInt(ongkir2) + parseInt(selected_tarif);
new_ongkir2 = addCommas(new_ongkir2);
$("#ongkir2").text("Rp "+new_ongkir2);
});
$(".kurir").change(function() {
var selected_courier = $(this).val();
var token = $(this).data('token');
var productid = $(this).data('productid');
var city = $("#city").val();
var area = $("#area").val();
var quantity = $(".orderlist2").find("."+productid).find(".quantity").text();
quantity = quantity.replace(/\D/g,"");
var json_url = "SOME URL HERE";
$.ajax({
url: json_url,
dataType: "JSON",
success: function(json){
var rate_tarif = "";
var selected_tarif = "";
$.each(json, function(i,o){
rate_tarif += "<option value="+o.tarif+">"+o.rate+"</option>";
});
$("#tarif-"+productid).append(rate_tarif).change();
event.preventDefault();
$("#tarif"+productid).prop("disabled", false);
selected_tarif = $("#tarif-"+productid).val();
}
});
});
$("#state").change(function() {
$('#rootwizard').find('.pager .next').hide();
});
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
},
onNext: function(tab, navigation, index) {
console.log("Showing next tab");
},
onPrevious: function(tab, navigation, index) {
console.log("Showing previous tab");
},
onInit: function() {
$('#rootwizard ul').removeClass('nav-pills');
}
});
});
})(window.jQuery);

Your subsequent comment explains it:
what you have is plain HTML, while in my case is using Select2 plugins
The way select2 works, it hides your select elements (without removing them) and creates a new structure, copying your classes and such to it. So you end up with .tarif elements that were in your HTML, and also .tarif elements created by select2.
You can limit the ones you respond to by narrowing your selector:
$("select.tarif").change(function() {
$("select.tarif").each(function() {
alert ($(this).val());
});
});
You can see what select2 does on their examples page.
Here's the "before" of the first example:
<select class="js-states form-control">
<!--...options and such...-->
</select>
Here's the "after":
<select class="js-example-basic-single js-states form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<!--...options and such...-->
</select>
<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-438s-container"><span class="select2-selection__rendered" id="select2-438s-container" title="Alaska">Alaska</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
Note how the original select is hidden, and the js-states and form-control classes were copied from the select to the select2-generated span.