We Keep Coding

Chosen select - filter <optgroup > using jquery

I am using chosen drop down in asp.net. Is there a way to filter optgroup ?
There is a radio button list control with values US and UK. I want to filter drop down based on user's radio button selection. If the 'US' is selected then drop down should only show US optgroup records.
Here is the jsfiddle;
http://jsfiddle.net/7ngftsq2/
This is what i have tried so far with no luck;
('#rbDistDiv input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
var ddlDist = $('#VCSdistSelect_ddlDist'),
val = $(this).val(),
region = $('option:selected', this).text();
$('span > optgroup', ddlDist).unwrap();
if (val !== '%') {
$('optgroup:not([label="' + region + '"])', ddlDist).wrap('<span/>');
}
});

You should be able to do something similar to this:
$(".chosen").chosen({
width: '600px',
allow_single_deselect: true,
search_contains: true
});
let UK_optgroup = $("#optgroup-uk").clone();
let US_optgroup = $("#optgroup-us").clone();
let CA_optgroup = $("#optgroup-ca").clone();
function filterSelect(selectedRadio) {
switch(selectedRadio) {
case "US": return US_optgroup
case "UK": return UK_optgroup
case "CA": return CA_optgroup
}
}
$('[type="radio"]').on('change', function() {
// This is only here to clear the selected item that is shown on screen
// after a selection is made. You can remove this if you like.
$("#selected-item").html("");
// Everything from here down is needed.
$("#select")
.children()
.remove('optgroup');
$("#select")
.append(filterSelect(this.value))
.trigger("chosen:updated");
});
$("#select").on('change', function(event) {
$("#selected-item").html("Selected Item: <b>" + event.target.value + "</b>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<table id="rbDistDiv" border="0">
<tbody>
<tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_2" type="radio" name="rbDistDiv" value="CA"><label for="rbDistDiv_2">CA</label></td>
</tr>
</tbody>
</table>
<p id="selected-item"></p>
<select id="select" class="chosen">
<option value="" disabled selected>Select your option</option>
<optgroup id="optgroup-uk" label="UK">
<option value="Adrian">Adrian</option>
<option value="Alan">Alan</option>
<option value="Alan B">Alan B</option>
</optgroup>
<optgroup id="optgroup-us" label="US">
<option value="John">John</option>
<option value="Billy">Billy</option>
<option value="Chris">Chris</option>
</optgroup>
<optgroup id="optgroup-ca" label="CA">
<option value="Gabrielle">Gabrielle</option>
<option value="Maude">Maude</option>
<option value="Morgan">Morgan</option>
</optgroup>
</select>

Just hide/show them by the label when an change is made to the radio button.
$('[type="radio"]').on('change', function () {
$('select')
.val('') // reset value if selection already made
.find('optgroup') // find the groups
.hide() // hide them all
.filter('[label="' + this.value + '"]') // find the one that matches radio
.show() // show it
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="rbDistDiv" border="0">
<tbody><tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr><tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
</tbody></table>
<br>
<select name="VCSdistSelect$ddlDist" id="VCSdistSelect_ddlDist" class="chosen-select" data-placeholder="Select a Distributor" >
<option selected="selected" value=""></option>
<optgroup label="US">
<option value="123" division="US">Aaron</option>
</optgroup>
<optgroup label="UK">
<option value="655" division="UK">John</option>
</optgroup>
</select>

How do I make all values in html select element selected using Javascript

In Html have two select tags, the first contains all the worlds countries, the second contains only the countries selected by user.
<form action="/fixsongs.fix">
<table>
<tr>
<td colspan="2">
<label title="Potential Releases from these countries get their score boosted">
Preferred Release Countries
</label>
</td>
</tr>
<tr>
<td>
<select id="preferred_countries_all" size="15" style="width:200px" multiple="multiple">
<option value=" AF">Afghanistan</option><option value="AX">Åland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option>...<option value="ZW">Zimbabwe</option>
</select>
</td>
<td>
<button style="width:100px" type="button" id="preferred_countries_add" onclick="add_preferred_countries();">
Add
</button>
<br>
<button style="width:100px" type="button" id="preferred_countries_remove" onclick="remove_preferred_countries();">
Remove
</button>
</td>
<td>
<select id="preferred_countries_selected" name="preferred_countries_selected" size="15" style="width:200px" multiple="multiple">
<option value="GB">United Kingdom</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Start">
The user selects them by highlighting and then click on button which invokes the following Javascript function.
function add_preferred_countries() {
allCountries = document.getElementById('preferred_countries_all');
selectedCountries = document.getElementById('preferred_countries_selected');
var length=$('#preferred_countries_all option:selected').length;
if(length==0) {
return false;
}
$('#preferred_countries_all option:selected').each(function(){
$('#preferred_countries_selected').append($(this));
});
//selectedCountries.value = "";
for (var i = 0; i < selectedCountries.options.length; i++) {
selectedCountries.options[i].selected = selected;
}
}
'
That bits works fine, but I have realized that when I finally submit the form containing this and various other options that it will send items in the select list that are actually selected. So in the absence of a better solution I want to automatically select all values in the preferred_countries_selected whenever user adds new countries, so that when user submits form the preferred countries will be sent to server
I thought this would work, but has no effect
for (var i = 0; i < selectedCountries.options.length; i++) {
selectedCountries.options[i].selected = selected;
I know the existing function has some JQuery in it, but I would prefer pure javascript solution as I don't really understand JQuery syntax.
Ideally I would prefer to do this just as they press submit, but that is another question.

You have some HTML validation issues with your table and you really should not use inline CSS or HTML event attributes (i.e. onclick) as they have many harmful side-effects.
See the inline comments in the code snippet below and note that you need the checked CSS pseudo-class, rather than selected:
// Get references to the two lists
var allCountries = document.getElementById('preferred_countries_all');
var selectedCountries = document.getElementById('preferred_countries_selected');
function add_preferred_countries(operation) {
if(operation === "add"){
// Get the selected countries from list one into an array
var allPreferredSelected = Array.prototype.slice.call(allCountries.querySelectorAll('option:checked'));
// Loop over the array
allPreferredSelected.forEach(function(selOption){
selectedCountries.appendChild(selOption); // Add each to the second list
});
// Loop through the second list and select each option
Array.prototype.slice.call(selectedCountries.querySelectorAll("option")).forEach(function(opt){
opt.selected = "selected";
});
console.log("Item added");
} else {
// Do remove operation here
// Loop over the selected countries in the second list
Array.prototype.slice.call(selectedCountries.querySelectorAll("option:checked")).forEach(function(opt){
selectedCountries.removeChild(opt); // Remove country
});
console.log("Item removed");
}
}
// Get the add and remove buttons into an array and loop over the array
Array.prototype.slice.call(document.querySelectorAll("button[id^='preferred_countries']")).forEach(function(btn){
// Set up a click event handler for the button
btn.addEventListener("click", function(){
add_preferred_countries(this.dataset.action); // Call the add/remove function with the right arg
});
});
/* Do your styling separate from the HTML */
button[id^='preferred_countries'] { width:100px; }
select { width:200px; height:20em; }
<form action="/fixsongs.fix">
<table>
<tr>
<td colspan="2">
<span title="Potential Releases from these countries get their score boosted">
Preferred Release Countries
</span>
</td>
</tr>
<tr>
<td>
<select id="preferred_countries_all" multiple="multiple">
<option value=" AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option><option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option><option value="BH">Bahrain</option>
...
<option value="ZW">Zimbabwe</option>
</select>
</td>
<td>
<button type="button" id="preferred_countries_add" data-action="add">Add</button>
<br>
<button type="button" id="preferred_countries_remove" data-action="remove">Remove</button>
</td>
<td>
<select id="preferred_countries_selected" name="preferred_countries_selected" multiple="multiple">
<option value="GB">United Kingdom</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Start">
</form>

Trying to create quantity x cost with Javascript

I am creating a merchandise page where I have put the items into separate tables. I want to have it so that when someone selects a quantity, it will display the appropriate price in the field below. Here's the HTML so far:
<table border="1" id="tshirtTable" style="float:left">
<tr>
<th colspan="2">Burundi T-Shirt</th>
</tr>
<tr>
<td colspan="2"><img src="https://rlv.zcache.com/burundi_t_shirt-re5f84ff8b0724bbda7582389e5816a6f_k2g1o_324.jpg" alt="Burundi T-shirt"></td>
</tr>
<tr>
<td id="qty">Quantity</td>
<td>
<select id="tshirt">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td id="price">Price</td>
<td><input type="text" disabled="true"></td>
</tr>
</table>
I'm pretty new to JS so not sure how to have it calculate the price, depending on which quantity is selected. Guessing I'll have to set the price somewhere, but not exactly sure how to get started on it.
Any help is appreciated, thanks!

I've refactored your code. In my example, we have list of products. It doesn't really matter, you can have here one product or as many as you want. For learning purposes it's better do handle table of items.
First of all we won't be using disabled attribute but readonly. It's is very important, because disabled key-value won't be send to the server. If you want to block the input from changing use readonly. Secondly you don't need to pass =true value to your attribute.
<input type="text" disabled="true"> // bad
<input type="text" readonly> // ok
Another thing is that attribute id is unique per document and we can have only one. Read more on MDN.
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
No jQuery in my example, you should learn pure javascript first.
To calc, we must change type of our values. Reading them from inputs, their type is String, we must convert them to Number. In our case we use parseInt() function. It's better to use parseFloat(), when we expect floating point number.
Read my comments to have better understanding what is going on. If you have any confusion make sure to ask.
var table = document.getElementById('tshirtTable');
table.addEventListener("change", function(e) {
// If we are not changing these elements we quit
if (e.target.name !== 'quantity' && e.target.name !== 'each-price') {
return;
}
// Let's check what is id of our element
// We store our id in <tr id="..."
// To access tr, we must find tr by using .closest function
var tr = e.target.closest('tr');
var productId = tr.id;
var quantityValue = tr.querySelector('.quantity').value;
var eachPriceValue = tr.querySelector('.each-price').value;
var totalPriceValue = tr.querySelector('.total-price').value;
// Here is important part, we must parse values as type Number, because currently they are type String
tr.querySelector('.total-price').value = ( parseInt(quantityValue) * parseInt(eachPriceValue)).toFixed(2);
});
<table border="1" id="tshirtTable" style="float:left">
<thead>
<th>Name</th>
<th>Quantity</th>
<th>Price / Each</th>
<th>Total Price</th>
</thead>
<tbody>
<tr id="1">
<td>Burundi T-Shirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="15"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="2">
<td>Burundi Skirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="25"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="3">
<td>Burundi Mask</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="30"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
</tbody>
</table>

First you have to add function which have to be call on document ready or as pure javascript document.onload()
Then you have to define a variable name for the price,
Then you have to get the value of your (#tishirt) and multiply it with the price get the result as a value for your text input in which the price display
Here is the script
<script type ="text/javascript">
document.onload=function(){
document.getElementById(#tishirt).onchange=function(){
var price=100 ;//only example price
var total=price*document.getElementById(#tishirt).value;
if (total>0){
document.getElementById(#total).value=total;
}
};
};
</script>
Don't forget to add id to your text box (#total)

Find closest input and set value

On select value change I want find closest input by class and change value.
JS
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#doc_service').on('change', function (){
$.getJSON('\/services\/search-service', {id: $(this).val()}, function(data){
$(this).closest('.price').val(data);
//$('.price').val(data);
});
});
});
</script>
My code $(this).closest('.price').val(data); not changing value, I try $('.price').val(data); it's work, but I have many input and want change value only one closest. Structure html is table
HTML
<tr>
<td>
<select id="doc_service">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td>
<input type="text" class="price">
</td>
</tr>
<tr>
<td>
<select id="doc_service">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td>
<input type="text" class="price">
</td>
</tr>

this in your code doesn't refer to the changed element, you should cache the object. Also note that closest method only selects the closest matching parent element.
$('#doc_service').on('change', function (){
var _this = this;
$.getJSON('\/services\/search-service', {id: this.value }, function(data) {
$(_this).closest('td').next().find('.price').val(data);
});
});
And IDs must be unique, $('#doc_service') only selects the first matching element, here classes should be used instead.

How to pass parameters on onChange of html select

I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select> with its selected id and contents at the other place on onChange().
How can I pass the complete combobox with its select id, and how can I pass other parameters on fire of the onChange event?

function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
The above example gets you the selected value of combo box on OnChange event.

Another approach wich can be handy in some situations, is passing the value of the selected <option /> directly to the function like this:
function myFunction(chosen) {
console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>

For how to do it in jQuery:
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>
You should also know that Javascript and jQuery are not identical. jQuery is valid JavaScript code, but not all JavaScript is jQuery. You should look up the differences and make sure you are using the appropriate one.

JavaScript Solution
<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
document.getElementById("comboA").onchange = function(){
var value = document.getElementById("comboA").value;
};
</script>
or
<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>
or
<script>
document.getElementById("comboA").onchange = handleChange;
function handleChange(evt){
var value = evt.target.value;
};
</script>

I found #Piyush's answer helpful, and just to add to it, if you programatically create a select, then there is an important way to get this behavior that may not be obvious. Let's say you have a function and you create a new select:
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';
The normal behavior may be to say
newSelect.onchange = changeitem;
But this does not really allow you to specify that argument passed in, so instead you may do this:
newSelect.setAttribute('onchange', 'changeitem(this)');
And you are able to set the parameter. If you do it the first way, then the argument you'll get to your onchange function will be browser dependent. The second way seems to work cross-browser just fine.

jQuery solution
How do I get the text value of a selected option
Select elements typically have two values that you want to access.
First there's the value to be sent to the server, which is easy:
$( "#myselect" ).val();
// => 1
The second is the text value of the select.
For example, using the following select box:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:
$( "#myselect option:selected" ).text();
// => "Mr"
See also
.val() jQuery API Documentation

This is helped for me.
For select:
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
For radio/checkbox:
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});

You can try bellow code
<select onchange="myfunction($(this).val())" id="myId">
</select>

Html template:
<select class="staff-select">
<option value="">All</option>
<option value="196">Ivan</option>
<option value="195">Jon</option>
</select>
Js code:
const $staffSelect = document.querySelector('.staff-select')
$staffSelect.onchange = function () {
console.log(this.value)
}

Just in case someone is looking for a React solution without having to download addition dependancies you could write:
<select onChange={this.changed(this)}>
<option value="Apple">Apple</option>
<option value="Android">Android</option>
</select>
changed(){
return e => {
console.log(e.target.value)
}
}
Make sure to bind the changed() function in the constructor like:
this.changed = this.changed.bind(this);

this code once i write for just explain onChange event of select you can save this code as html and see output it works.and easy to understand for you.
<html>
<head>
<title>Register</title>
</head>
<body>
<script>
function show(){
var option = document.getElementById("category").value;
if(option == "Student")
{
document.getElementById("enroll1").style.display="block";
}
if(option == "Parents")
{
document.getElementById("enroll1").style.display="none";
}
if(option == "Guardians")
{
document.getElementById("enroll1").style.display="none";
}
}
</script>
<form action="#" method="post">
<table>
<tr>
<td><label>Name </label></td>
<td><input type="text" id="name" size=20 maxlength=20 value=""></td>
</tr>
<tr style="display:block;" id="enroll1">
<td><label>Enrollment No. </label></td>
<td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
</tr>
<tr>
<td><label>Email </label></td>
<td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
</tr>
<tr>
<td><label>Mobile No. </label></td>
<td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="2" cols="20"></textarea></td>
</tr>
<tr >
<td><label>Category</label></td>
<td><select id="category" onchange="show()"> <!--onchange show methos is call-->
<option value="Student">Student</option>
<option value="Parents">Parents</option>
<option value="Guardians">Guardians</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" value="Sign Up">
</form>
</body>
</html>

function setMyValue(v) {
console.log(v);
}
<select onchange="setMyValue(this.value)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>

This worked for me onchange = setLocation($(this).val())
Here.
#Html.DropDownList("Demo",
new SelectList(ViewBag.locs, "Value", "Text"),
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });

Simply:
function retrieve(){
alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}
function retrieve_other() {
alert(myForm.SMS_recipient.options[document.getElementById('SMS_recipient').selectedIndex].text);
}
function retrieve() { alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}
<HTML>
<BODY>
<p>RETRIEVING TEXT IN OPTION OF SELECT </p>
<form name="myForm" action="">
<P>Select:
<select id="SMS_recipient">
<options value='+15121234567'>Andrew</option>
<options value='+15121234568'>Klaus</option>
</select>
</p>
<p>
<!-- Note: Despite the script engine complaining about it the code works!-->
<input type="button" onclick="retrieve()" value="Try it" />
<input type="button" onclick="retrieve_other()" value="Try Form" />
</p>
</form>
</HTML>
</BODY>
Output:
Klaus or Andrew depending on what the selectedIndex is. If you are after the value just replace .text with value. However if it is just the value you are after (not the text in the option) then use document.getElementById('SMS_recipient').value

//html code
<select onchange="get(this)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
//javscript code
function get(select) {
let value = select.value;
console.log(value);
}