What I have:
I have a select element. Some of the options have both a class (.filterable_option) and custom attribute (data-clienturn).
What I need:
Based on the on change event of another element, I need to remove options from the select element that:
...are classed as .filterable_option.
...have a data-customattribute value NOT EQUAL TO the value of a predefined variable (var = $some_value).
My code:
HTML:
<select name="myselect_a">
<option selected="selected"></option>
<option value="Apply filter">Apply filter</option>
</select>
<select name="myselect_b">
<option selected="selected"></option>
<option data-customattribute="58" value="1" class="filterable_option">Dog</option>
<option data-customattribute="58" value="2" class="filterable_option">Cat</option>
<option data-customattribute="60" value="3" class="filterable_option">Parrot</option>
<option>I have no class or custom attribute.</option>
</select>
jQuery:
$('#myselect_a').on('change', function() {
var $myselect_a_option = $("#myselect_a").val();
if($myselect_a_option === 'Apply filter'){
var $some_value = '58';
$("select[name=myselect_b] option.filterable_option[data-customattribute!=" + $some_value + "]").remove();
}
});
JSFiddle:
For your convenience: http://jsfiddle.net/clarusdignus/L82UH/
My problem:
My code is not removing the required in options. Nothing happens.
You have used a name in your selector. Use an id instead as shown below
<select id="myselect_a">
<option selected="selected"></option>
<option value="Apply filter">Apply filter</option>
</select>
http://jsfiddle.net/L82UH/1/
Or if you still want to go for name, try the below code:
$('select[name="myselect_a"]').on('change', function() {
//your code
});
You have wrong selector for select and also following bit is corrected:
name='myselect_b']
Demo: http://jsfiddle.net/aamir/L82UH/2/
$('select[name="myselect_a"]').on('change', function() {
var $myselect_a_option = $(this).val();
if($myselect_a_option === 'Apply filter'){
var $some_value = '58';
$("select[name='myselect_b'] option.filterable_option[data-customattribute!=" + $some_value + "]").remove();
}
});
See you have name attribute in your markup:
<select name="myselect_a">
and you are using a id selector:
$('#myselect_a')
this is the issue.
Related
I am trying to get the name of all selected items from select multiple="multiple" options dropdown.
In my html page, I have the following code snippet:
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
In my JS file, I have the following code snippet:
var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];
However, the variable categoryNameArray only gives me the array of the selected items, what I want is the name of the selected items. Can someone tell me a way how I can make this work? Thanks!
Since val isn't giving you what you want, I'm going to assume you want an array of the text of the selected items.
You can get that like this:
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
That finds all the selected items, then uses map to get the text of each of them (wrapped in a jQuery object), then uses get to turn that jQuery object into an array.
You can probably use return this.text; rather than return $(this).text();, since HTMLOptionElement has a text property (which most elements don't), but I'd be sure to test with my target browsers to be sure.
Example:
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example with this.text instead of $(this).text():
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return this.text;
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
val() returns the values on the selected options, in your case 1, 2 .... You should use text() to get the names of the selected options. You can loop through all selected options using each() method and get the selected values using text():
$('a').on('click', function(e) {
e.preventDefault();
$('#ddlCategory option:selected').each(function(i, selected) {
console.log($(selected).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
Send
You can read more on how val() works here.
You can read more on how text() works here.
Try this:
var categoryNameArray =
$('#ddlCategory option:selected').map(function(){
return this.text;
}).get();
console.log("category = " + categoryNameArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option selected="selected" value="2">Restaurant</option>
<option value="3">Coffee Shop</option>
<option value="4">Hotels</option>
</select>
Easy way to get all selected value is $('#ddlCategory').val();
I have a select box and add more button. when I click add more button it's creating another select using clone.In first select box I select one option value from select box means that value should be removed from next created select box.At the same time which selected value in select box that current value shown on current select box. Select box value is being loaded dynamically.
Eg:
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
Is it what you're looking for ?
I would recommend you to play and manipulate with index(), that won't bother your dynamic values.
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
$('button').click(function(){
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value="">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Clone</button>
You can try like this.
$("#yourId").val(" ")//if your value has white spec else use like below line
$("#YourId").val("")//What ever you want to be selected, place your value in .val()
I hope this will help you, if you need anything please ask!
$("button").on("click", function() {
$("#section_1")
.clone()
.attr("id", "section_2")
.on("change", function() {
var sec2Val = $(this).val();
var delOption = $("#section_1 > option[value=" + sec2Val + "]").detach();
optionHolder.push(delOption);
})
.insertAfter($("#section_1"));
$(this).attr("disabled", "disabled");
});
var optionHolder = [];
$("#section_1").on("change", function() {
var sec1Val = $(this).val();
if ($("#section_2")) {
var delOption = $("#section_2 > option[value=" + sec1Val + "]").detach();
optionHolder.push(delOption);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Add more</button>
I have the following HTML Select Box
<select id="orderByItem" name="orderByItem">
<option selected="" value="Status">Status</option>
<option value="ABCD">ABCD</option>
</select>
'Status' option is selected. Now when I remove the 'ABCD' option through javascript it gets replaced by None
This is the javascript I use
$("#orderByItem option[value='ABCD']").remove();
I am not sure how 'None' gets into the select, and this is causing major problems.
Try this http://jsfiddle.net/1q97q8z6/1/
HTML
<select id="orderByItem" name="orderByItem">
<option selected="" value="Status">Status</option>
<option value="Status2">Status2</option>
<option value="ABCD">ABCD</option>
</select>
<input type="button" name="but" id="but" Value="click"/>
JS
$( "#but" ).click(function() {
$("#orderByItem option[value='ABCD']").remove();
$("#orderByItem").get(0).selectedIndex = 1;
var tempVal = $("#orderByItem").val();
alert(tempVal);
});
var x = document.getElementById("orderByItem");
x.remove(x.selectedIndex);
Reference w3schools
I have these SELECTs in my page
<select id="select_status_id44" name="select_status_id[44]" class="inputbox" id = "status_id_44">
<option value="1">Pending</option>
<option value="2" selected="selected">Confirmed</option>
<option value="3">Cancelled</option>
<option value="4">Refunded</option>
<option value="5">Shipped</option>
<option value="6">Paid</option>
<option value="7">Complete</option>
</select>
And also this one
<select id="select_status_id78" name="select_status_id[78]" class="inputbox" id = "status_id_44">
<option value="1">Pending</option>
<option value="2" selected="selected">Confirmed</option>
<option value="3">Cancelled</option>
<option value="4">Refunded</option>
<option value="5">Shipped</option>
<option value="6">Paid</option>
<option value="7">Complete</option>
</select>
I want to do is that whenever any of these two SELECT is CHANGED, it shoul dget the select_status_id[ID] ID inside that tag...
For now I have simply done this but it does not work
$('select[name=select_status_id]').change(function() {
alert('dsada');
});
I know that I should not get using ID attribute because they are different for both ... but NAME attribute is same
Try this way
$('select[name^="select_status_id"]').change(function() {
alert($(this).attr('name').split('[')[1].replace(']',''));
});
DEMO
You can try this on change for each select.
$("#select_status_id44").change(function(){
var val = "select_status_id["+$(this).val()+"]";
$(this).prop("name", val);
console.log(val);
});
UPDATE: Check this Fiddle : http://jsfiddle.net/JayKandari/L8TWN/1
if you can add a data-property to your select
<select data-id-value="42" ..... >
$('select').on('change', function() {
console.log ( $(this).data('id-value') );
});
I have 6 different select boxes and a text field which I need to fetch the value from and combine in to one text field using jQuery.
I understand essentially I will build the value for the targetTextField with a string like this: $('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);
What do I use to fetch the value of select#options1 and transform that in to opt1?
Would it be along the lines of opt1 = $('select#options1').val(); or am I heading in completely the wrong direction?
I've created a basic jsfiddle with just two options at:
http://jsfiddle.net/e2ScF/2/
jQuery
$(function() {
$("#options").change(function(){
var opt1 = $('select#options').val()
}$('#targetTextField').val(opt1+opt2);
});
$("#options2").change(function(){
var opt2 = $('select#options2').val()
}$('#targetTextField').val(opt1+opt2);
});
});
HTML
<select id="options">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
...but it doesn't appear to be working, so I've obviously misunderstood or missed something.
I made this demo for you, hope it helps
http://jsfiddle.net/e2ScF/5/
$(function() {
$("#options").change(function(){
setTarget() ; // Something has changed so lets rebuild the target
});
$("#options2").change(function(){
setTarget();// Something has changed so lets rebuild the target
});
});
// Just get the values you want and update the target
function setTarget(){
var tmp = $("#options").val();
tmp += $("#options2").val();
$('#targetTextField').val(tmp);
}
for dropdown try following
$('select option:selected').text()
have a look at this it should hopefully give you a pointer in what you need to do.
you can change the name to be a class and then just provide your format you want to display in the input. but from your question in presume it should be about that.
If you have different id for select box
var toalopt=$('select option1:selected').text();
toalopt+=$('select option2:selected').text();
toalopt+=$('select option3:selected').text();
toalopt+=$('select option4:selected').text();
toalopt+=$('select option5:selected').text();
toalopt+=$('select option6:selected').text();
document.getElementById('id where you want to club data').innerHTML=toalopt;
If you have same id
$(document).ready(function(){
$('#optionvalue).click(function(){
var values ='';
$('select[name="sameid"]').each(function(index,item){
values +=$(item).val() +' ';
});
$('id where you want to club data').val(values);
});
});
HTml will be normal select tag with id.
First of all, add a class to each of your select elements to better identify them as a group:
<select id="options" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
Then in jQuery, you can use map() to create an array of the values and display them:
$(".auto-updater").change(function() {
var values = $(".auto-updater").map(function() {
return ($(this).val() == "") ? null : $(this).val(); // ignore default option select
// return $(this).val(); // include all values
}).get();
$("#targetTextField").val(values.join(','));
});
Example fiddle
You can see that I've set this up to ignore select elements which are left on their default value. If you uncomment the line beneath it will include all selects, regardless of value chosen.
Minimal code required for you as below:
$(function() {
$("select").change(function(){
var opts=$('option:selected').val();
var oldVal=$('#targetTextField').val();
$('#targetTextField').val(oldVal+opts);
});
});
Find the jsfiddle demo here.