I'm using Chosen Multiple Select
What I want to do is that if user selects any option I want that value and then I will do some functionality depending on that value.
In chosen without multiple select i can get selected value by using foll. code
$(".selectId").chosen().change(function(){
selectedValue = $(this).find("option:selected").val();
});
But in multiple select I get the first selected value again n again
can anybody help me by finding the current selected value in multiple select element??
The Chosen documentation mentions parameters for getting the most recently changed variables.
Chosen triggers the standard DOM event whenever a selection is made
(it also sends a selected or deselected parameter that tells you
which option was changed).
So, if you just want the most recent option selected or deselected:
$(".selectId").chosen().change(function(e, params){
// params.selected and params.deselected will now contain the values of the
// or deselected elements.
});
Otherwise if you want the whole array to work with you can use:
$(".selectId").chosen().change(function(e, params){
values = $(".selectId").chosen().val();
//values is an array containing all the results.
});
Short answer:
You just do this: var myValues = $('#my-select').chosen().val();
Full example:
If you have a select-multiple like this:
<select id="my-select" class="chzn-select" multiple data-placeholder="Choose one or more values...">
<option value="value1">option1</option>
<option value="value2">option2</option>
<option value="value3">option3</option>
</select>
You can get the selected values in an array to doing the following:
// first initialize the Chosen select
$('#my-select').chosen();
// then, declare how you handle the change event
$('#my-select').chosen().change(function(){
var myValues = $('#my-select').chosen().val();
// then do stuff with the array
...
});
your code is gettin the correct selected value.. but since its multiple you need to use loop..or use map to get the selected value and push it into array..
try this
$(".selectId").chosen().change(function(){
var selectedValue = $.map( $(this).find("option:selected").val(), function(n){
return this.value;
});
console.log(selectedValue ); //this will print array in console.
alert(seletedValue.join(',')); //this will alert all values ,comma seperated
});
updated
if you are getting commaseperated values then use split()
var values= $(".selectId").val();
$.each(values.split(',').function(i,v){
alert(v); //will alert each value
//do your stuff
}
try this
$('.selectId:selected').each(function(i, selected) {
var value = $(selected).val();
var text = $(selected).text();
});
The Chosen documentation mentions parameters for getting the most recently changed variables.
$(".CSS Selector").chosen().change(function(e, parameters) {
// params.selected and params.deselected will now contain the values of the
// or deselected elements.
});
This is how I've got it to work. In my html, I've this
<select data-placeholder="Choose a Country..." class="form-control chosen-select" multiple tabindex="4">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="CHINA">CHINA</option>
</select>
Then javascript
// apply chosen-js to the DOM, and store it in a variable.
var chosen = $(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
});
// inside the change event, we get the value by calling chosen.val()
chosen.change(function() {
console.log('selected tags are', chosen.val());
});
Related
I am trying to find a way to select part of the string before the dollar sign in the select menu. Right now I am just trying to hide it so it does not appear in the dropdown, but it will be used later so I do not want to simply strip it out because I will need to be able to use it in a variable when the option is selected.
var seminiars;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
<option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>
</select>
So far I have only been able to remove it completely, but then I was unable to store it and use it when someone selects on of the option.
Side note: I am unable to edit the html directly, the code is automatically generated.
okay... I just noticed the side note.
I am unable to edit the html directly, the code is automatically generated.
The trick here, will be to set a data value for each option.
// Run that loop to set the data values for each option
$("select option").each(function() {
let optionText = $(this).text();
let textSplit = optionText.split("$")
$(this).data("before_dolard_sign", textSplit[0])
$(this).text(textSplit[1])
})
$("select").on("change", function() {
// So on change, you have access to it
console.log($(this).find("option:selected").data("before_dolard_sign"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
<option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>
</select>
You can use the value attribute to store more information not in the text visible to the user. I've added some code below to show how you can get the text or value selected by the user.
If that isn't suitable I've also created a test input and button which helps demonstrate how you can split a string in the way you need to.
The code is fully commented.
Let me know if you were hoping for something else.
// Detect when user changes select option
$("#selectTest").change(function() {
// Get the text selected by the user
console.log($("#selectTest option:selected").text());
// Get the value selected by the user
console.log($(this).val());
});
// Add click event
$("#splitButton").click(function() {
// Get input value
var test = $("#splitTest").val();
// Split around dollar sign
var els = test.split("$");
// Print values to show we did it correctly
console.log(els[0]);
console.log("$" + els[1]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="selectTest">
<option value="1$5,000">$5,000</option>
<option value="1$5,000">$10,000</option>
<option value="5$100,000">$100,000</option>
<option value="10$500,000">$500,000</option>
</select>
<input id="splitTest" value="10$500,000">
<button id="splitButton">Show Split</button>
why not place this data onto a data-meta attribute?
instead of
<option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>
perhaps
<option data-meta="1">$5,000</option>
<option data-meta="2">$10,000</option>
<option data-meta="5">$100,000</option>
<option data-meta="10">$500,000</option>
then you can find the selected option and use element.getAttribute("data-meta") to retrieve the data when you need it
edit: i now see your side-note that you can't edit the html. well, replace it. loop over the html, and use .split on the textContent, and move that meta data into an attribute
Use the data attribute to store the info and then run an event listener to retrieve the dataset when selected on change?
const select = document.querySelectorAll('#money');
select.forEach((val) => {
if (val.value != 'undefined') {
val.addEventListener('change', () => {
let data = val.options[val.selectedIndex].dataset['num'];
console.log(data)
})
}
});
<select id="money">
<option style="display: none;">-->Select an option below<--</option>
<option data-num='1' class='opt' value='5000'>$5,000</option>
<option data-num='2' class='opt' value='10000'>$10,000</option>
<option data-num='5' class='opt' value='100000'>$100,000</option>
<option data-num='10' class='opt' value='500000'>$500,000</option>
</select>
How do I get all selected options from a <select> using jQuery?
<select id="mySelector" ... >
<option value="1" selected="selected">option1</option>
<option value="2" selected="selected">option2</option>
<option value="3">option3</option>
</select>
I tried $('#mySelector').find(":selected"). It returns [].
But if my options have only selected property instead of selected="selected" $('#mySelector').find(":selected") returns the correct results.
Am I doing something wrong?
There is little difference between attributes and properties.
Attributes does have assigned values like attr="value".
While properties are just a property which does not have any value assigned like checked, selected etc..
so to answer your question i would say then you have to use .map() iterations to create array:
var arr = $('#mySelector option').map(function(){
return $(this).attr('selected') === "selected"
}).get();
You can try both, one after another:
$('#mySelector').find(":selected")//animate...
$('#mySelector').each(function(){
if ($(this).attr('selected') === "selected"){
//animate...
}
}
Setting the attribute selected="selected" will work as a pre-selected option and will be displayed first in the drop-down list.
However, I guess the user chooses something and you want to get that value.
$('select option:selected').each(function () {
alert($(this).val());
});
Iterate through each one in the select element and with the pseudo selector :selected just get it's value.
JsFiddle demo
Note: If you instead want the text, not the value, use .text() instead of .val()
I've got a dropdown box to the left of a select/option box.
I would like for jquery to check to see if the item already exists by value. The value for each option won't be in any order.
Text box:
<select id="selectbox">
<option value="20:32">Something1</option>
<option value="103:16">Something2</option>
</select>
The dropdown will have a list of items that also share the same values.
Is there a way to do something like:
$("#boxbutton").click(function () {
if (('#dropdownbox :selected').val() doesn't exist inside #selectbox list)
{
...add dropdownbox item;
} else { do nothing };
});
I want to make sure the function is checking the entire selectbox value list and NOT selected/highlighted entries in the selectbox. The textbox won't always have selected entries and will need to be checked anyway.
When The user goes to the dropdown box to add another entry to the selectbox it should repeat the search.
Not having any luck using the .length keyword. Any ideas?
Try this:
var value = $('#dropdownbox').val(); // :selected is unnecessary
var hasValue = ( $('#selectbox option[value="'+value+'"]').size() > 0 );
Keep one Array and put all of your values into it. Then you can easily validate your text box value with that array.
Or you have to get all option tag value by using DOM iteration.
I have dropdownlist whose value is filled using the value of the other drop down. The problem here is that i need to bind the value of the second when the value of the first changes. I need to do it from the javascript.
Only thing i need to do is remove and add the select options in the second dropdown as the first dropdown changes.
How can i do this?
Thanks in advance.
Not too sure exactly what you want with the limited information provided but here is a solution that I think you are looking for:
HTML:
<select id="primary">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<select id="secondary"></select>
jQuery:
var opts = {
'one':['a','b','c'],
'two':['d','e','f']
};
$('#primary').change(function(){
var select = [];
$.each(opts[this.value], function(k, v){
select.push('<option>'+ v +'</option>');
});
$('#secondary').html(select.join(''));
});
Demo: http://jsfiddle.net/28TQZ/
$("#dropdownlist1").change(function () {
var selected = $("#dropdownlist1 option:selected");
//clear
$("#dropdownlist2").html("");
$("#dropdownlist2").append($("<option/>").text(selected.text()).val(selected.val()));
})
Create all the drop downs you need, but only add options to the first one. The next ones only have a "default" value.
On selecting the first drop down, you use jQuery to get the values for the second drop down, based on the value selected in the first drop down:
$.post('ajax/aj_populate2nddropdown.php', $("#firstdropdown").val(), function(result) {
$('div.placedaround2nddropdown').html(result);
});
The file ajax/aj_populate2nddropdown.php collects the values of the second drop down, and returns them, inserted as options into the dropdown.
One simple way to do it is to just have a main dropdown and a bunch of secondary dropdowns that start hidden. when you choose something from the first, then you unhide the related second one
Try this If you are trying at client side
Replace your controls with asp.net server controls
I am trying to build a form that fills in a person's order.
<form name="food_select">
<select name="maincourse" onchange="firstStep(this)">
<option>- select -</option>
<option text="breakfast">breakfast</option>
<option text="lunch">lunch</option>
<option text="dinner">dinner</option>
</select>
</form>
What I'm trying to do is send in the select object, pull the name and the text/value from the option menu AND the data in the option tag.
function firstStep(element) {
//Grab information from input element object
/and place them in local variables
var select_name = element.name;
var option_value = element.value;
}
I can get the name and the option value, but I can't seem to get the text="" or the value="" from the select object. I only need the text/value from the option menu the user selected. I know I can place them in an array, but that doesn't help
var option_user_selection = element.options[ whatever they select ].text
I also need to use the passed in select reference as that is how it's set up in the rest of my code.
Later on, that text/value is going to be used to pull the XML document that will populate the next select form dynamically.
You can use:
var option_user_selection = element.options[ element.selectedIndex ].text
In jquery you could try this $("#select_id>option:selected").text()
var option_user_selection = document.getElementById("maincourse").options[document.getElementById("maincourse").selectedIndex ].text
form.MySelect.options[form.MySelect.selectedIndex].value