select onclick event jquery - javascript

I need to test select box values using javascript. But Its outputs the previous value on click, don't know what would be the case.
Here's my code:
$(document).ready(function(){
$('select').click(function(){
var id = this.id;
var text = $('#'+id+' :selected').text();
alert(text);
});
});
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
I gave the static id for testing purpose, but in real I want to take out the id from select box.
My question is, how can I get the exact value output(HTML) of options on click.

$(document).ready(function(){
alert($('#combo').val());
alert($('#combo option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
You can use $('select').val(). This will give you the select field value. Listen for change event to capture the changes.

Here is the common and easy approach:
$("#combo").change(function(){
var selectedvalue = $( "#combo option:selected" ).text();
});

Related

How do I create a list of the selected options from a dropdwon

I am trying to loop through a multiple select dropdown list and add all of the selected options to a comma separated list.
My dropdown code is:
<select name="testnameID" id="testnameID" multiple>
<option value="1">Test number 1</option>
<option value="2">Test number 2</option>
<option value="3">Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
In my tag I am using the following, but think it can be simplified or improved:
var testnameID = $('#testnameID').val();
var testnameText;
Array.from(document.querySelector("#testnameID").options).forEach(function(option_element) {
let option_text = option_element.text;
let is_option_selected = option_element.selected;
if (is_option_selected===true){
testnameText = testnameText + option_text +", ";
console.log("TestnameText: "+testnameText);
console.log("\n\r");
}
});
I need to generate a variable, testnameText, which if the first three items were selected, would return a value of "Test number 1, Test number 2, Test number 3"
I'm getting myself in a muddle!
You can try using Document.querySelectorAll() to target all the selected options like the following way:
Array.from(document.querySelectorAll("#testnameID option:checked")).forEach(function(option_element) {
let option_text = option_element.text;
var testnameText = option_text +", ";
console.log("TestnameText: "+testnameText);
console.log("\n\r");
});
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
You can also try using Array.prototype.map() and Arrow function expressions which is more shorter.
The following example creates an array of the selected options:
var checkedOptions = Array.from(document.querySelectorAll("#testnameID option:checked"));
var res = checkedOptions.map(option_element => ("TestnameText: "+option_element.text));
console.log(res);
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
In this case, jquery's each() can help. So getting selected options is pretty simple:
$('#testnameID :selected').each(function (index, el) {
console.log("TestnameText: " + $(el).text());
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
</select>
selectedOptions contains all the selected options of a select element. You can use it like this:
const select = document.querySelector('select');
select.addEventListener('change', e => {
// Option texts as an array
const texts = Array.from(e.target.selectedOptions).map(({text}) => text);
// Option texts as a comma-separated string
const textsStr = texts.join(', ');
console.log(texts);
console.log(textsStr);
});
<select multiple>
<option value="1">Test number 1</option>
<option value="2">Test number 2</option>
<option value="3">Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
</select>
This works outside of the event too, just refer the select element directly instead of e.target.

Js dropdown depends of an other dropdown

Hey guys simple question how can I display in the second dropdown information that depends of the first one.
Example. I have this:
var option = document.getElementById("second_dropdown").getElementsByTagName("option");
for (var j = 0; j < option.lenght; j++) {
option[j].disabled = true;
}
<!-- DROPDOWN 1 -->
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- DROPDOWN 2 -->
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</option>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</option>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</option>
<select>
And I would like to display in dropdown 2 only the optgroup that has been selected in dropdown 1 ...
I really don't know about js so I hope that i explained it well and thanks in advance :)
But here I only disable all (and I want to disable only what's not selected in dropdown one) and I don't want to disable but I want to undisplay.
Loop through optgroup of second <select> and in loop check if value of first select is equal to label of optgroup remove disabled of it.
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.disabled = ele.label != val
});
};
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>
Also you should change display property of element if you want to show/hide optgroup
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.style.display = ele.label==val ? "block" : "none";
});
};
Also you can do this work simplify using jquery
$("#first_dropdown").change(function(e){
$("#second_dropdown optgroup").css("display", function(){
return this.label==e.target.value ? "block" : "none";
});
});
You can try the following way:
var firstDD = document.getElementById('first_dropdown');
firstDD.addEventListener('change',changeDD);
function changeDD(){
var fValue = firstDD.value;
document.querySelectorAll('#second_dropdown > optgroup').forEach(function(el){
if(el.label != fValue )
el.style.display='none';
else
el.style.display='block';
});
document.querySelector('#second_dropdown').value = "";
}
changeDD(firstDD);
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla 21</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>

Selectize - select 2nd option on load

On load, how to select second option using selectize plugin?
https://github.com/selectize/selectize.js
As per below example, it have to select 21-Nov-2017.
I can able to select option using value.. but, this value will be dynamic and will change daily.
Thanks
HTML:
<select>
<option value="20-Nov-2017">20-Nov-2017</option>
<option value="21-Nov-2017">21-Nov-2017</option>
<option value="22-Nov-2017">22-Nov-2017</option>
</select>
You can select the second value on the basis of index like this
$('#selectBox :nth-child(2)').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
</select>
In version 1.6 and higher the prop() method is recommended:
$('.selDiv option:eq(1)').prop('selected', true)
In older versions:
$('.selDiv option:eq(1)').attr('selected', 'selected')

jQuery Select box multiple option get value and match values

I have same classname multi select box with same values in body, what I want if use chose value 1 from first or any select box then that value 1 on all other select box option will disable so user can't choose the same value in other multi select box.
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
This need to achieve via javascript or jQuery,
So you're likely going to get downvotes. You haven't actually shown that you've tried anything, you have only given us the HTML and asked that we solve your problem.
That said, I like to sink my teeth into easy problems, as this is. What you're wanting to do is, in each select, listen for the change event. When that triggers, get the value of the selected option, and disable any option with that value in any other selects. Take a look at the following:
$(function() {
/********
* Function to disable the currently selected options
* on all sibling select elements.
********/
$(".myselect").on("change", function() {
// Get the list of all selected options in this select element.
var currentSelectEl = $(this);
var selectedOptions = currentSelectEl.find("option:checked");
// otherOptions is used to find non-selected, non-disabled options
// in the current select. This will allow for unselecting. Added
// this to support extended multiple selects.
var otherOptions = currentSelectEl.find("option").not(":checked").not(":disabled");
// Iterate over the otherOptions collection, and using
// each value, re-enable the unselected options that
// match in all other selects.
otherOptions.each(function() {
var myVal = $(this).val();
currentSelectEl.siblings(".myselect")
.children("option[value='" + myVal + "']")
.attr("disabled", false);
})
// iterate through and disable selected options.
selectedOptions.each(function() {
var valToDisable = $(this).val();
currentSelectEl.siblings('.myselect')
.children("option[value='" + valToDisable + "']")
.attr("disabled", true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel2" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel3" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel4" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
Edited the above code to support multiple selects. Actually, it wasn't so much an issue of multiple selects, as I was doing a very lazy handling of unselecting options. Now, when the user is selecting or de-selecting options in any select, only the non-disabled options in that select are used: the (":checked") to disable that option in all other selects, and the .not(":checked") to re-enable any options that the user has somehow unselected.
Try this code , it should do the job:
using Not selector and for each to iterate on other select options:
$(document).ready(function() {
$('.myselect:first').change(function() { // once you change the first select box
var s = $('.myselect:first option:selected').val(); // get changed or clicked value
others = $(':not(.myselect:first) >option'); //select other controls with option value
others.each(function() {
if (this.value == s) // for example if you click on 1 the other controls will get 1 disabled
$(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');
// remove disabled from others if you click something else
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>

How to apply onChange event for a heapbox using jquery?

Suppose
<select class="csrSelect" id="queueSelect">
<option value="">Select Another Queue to Manage</option>
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
<option value="4">Store 4</option>
<option value="5">Store 5</option>
<option value="6">Store 6</option>
</select>
and the css class 'csrSelect' has implemented heapbox on this select box. Now i want to call an onChange event like:
<select class="csrSelect" id="queueSelect" onChange="Changed()">
<option value="">Select Another Queue to Manage</option>
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
<option value="4">Store 4</option>
<option value="5">Store 5</option>
<option value="6">Store 6</option>
</select>
But it is not working.Please Help me.
You just need to use heapbox events.You should use heapbox onchange event in your purpose.
$(".mySelect").heapbox({
'onChange':function(){},
'openStart':function(){},
'openComplete':function(){},
'closeStart':function(){},
'closeComplete':function(){},
});
You can read documentation from http://www.bartos.me/heapbox/
Its working perfect..
Enjoy...
You can setup heapbox to trigger events of original elements this way:
$('select').heapbox({
"onChange":function(val, elm) {
elm.trigger('change');
}
});

Categories