How would I select my dropdown list item by text rather than value?
I want to select a dropdown item by text with jQuery.
use :contains()(link)
$("select option:contains(text)").attr('selected', true);
demo
There is a filter function on jQuery that you can use to get elements with something more specific
$("select option").filter(function() {
return $(this).text() == "text_to_select";
});
This is going to return all options with the "text_to_select" in the text.
i think this will do the trick for you...
$("#selectId").find("option:contains('text')").each(function(){
if( $(this).text() == 'Text that should be matched' ) {
$(this).attr("selected","selected");
}
});
Here's the code I use (it's not quite the same as the other suggestions here, and works with jQuery v1.8.3)
var userToSearchFor = 'mike'; // Select any options containing this text
$("#ListOfUsers").find("option:contains('" + userToSearchFor +"')").each(function () {
$(this).attr("selected", "selected");
});
<select id="ListOfUsers" ></select>
Hope this helps.
I had a similar scenario with dropdowns for country, state and city. Country had "India" as well as "British Indian Ocean Territory". The issue with :contains() is that it attempts on both matches. I did something like:
$('#country option').each(function(){
if($(this).text() == 'India'){
$(this).prop('selected', true).trigger('change');
}
});
$("selecter option:contains('" + data[i].ID+ "')").attr('selected', 'selected');
Related
Trying to make if condition of selected option of another select not the current which contains certain text string as a text and not the value.
Example:
<select class="Selected">
<option>Hello</option>
<option>Bye</option>
</select>
In the following case what I have is the fowling. a trigger of another select:
$(".Selected_Two").change(function () {
if ($(this).closest('.div-block').find('.Selected:contains("Bye")')) {
alert('Bye');
}
});
So basically if the select option is selected in the select when triggering the other select will have to see alert "Bye"
But it is not working at this state. Any help is welcome.
Two ways to do that indexOf() for value or :contains for option text
indexOf()
$(".Selected_Two").change(function () {
var SelectTwoValue = $(this).val();
if ($(this).closest('.div-block').find('.Selected)').val().indexOf(SelectTwoValue ) > -1) {
alert('Bye');
}
});
:contains and length
$(".Selected_Two").change(function () {
var SelectTwoValue = $(this).val();
if ($(this).closest('.div-block').find('.Selected option:selected:contains("'+SelectTwoValue+'")').length > 0) {
alert('Bye');
}
});
Maybe you'll need to work around .val().indexOf() and :contains("'+SelectTwoValue+'")').length .. but I think you got the point
I am trying to control select menu items via jquery and want to behave them like tabbing.. but no luck.. any help much appreciated.
Thanks in advance!
$('#box-wrap .box').eq(0).css({'display':'block'});
$('.select-menu').on('change', function(){
$('.select-menu option:selected').each(function(){
$('#box-wrap .box').fadeOut();
$('#'+ $(this).data('url')).fadeIn();
});
});
here is jsfiddle url:
http://jsfiddle.net/mufeedahmad/FLzQc/1/
Assuming that you want like this:
When option is selected from 1st select, the box should show as option from 1st select's selected option and when option is selected from 2nd select, then 2nd select selected option.
Code Used:
$('#box-wrap .box').eq(0).css({'display':'block'});
$('.select-menu').on('change', function(){
var option_id = $(this).find('option:selected').data('url');
$('.box').each(function(){
if($(this).attr('id') === option_id){
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
});
Fiddle Demo : http://jsfiddle.net/budhram/pUse5
I have a box with one select with two options.
Depending on the options i need to display a different set of checkboxes.
Depending on what the user choose on the select i will display a set of checkboxes or another.
Here i have made here an example:
http://jsbin.com/acOXisI/20/edit
How can i grab the option selected in the selector?
And subsequently how can i display or not the checkboxes fieldset?
Thank you very much!
The javascript you need is:
// hide the fieldsets on page load
$(".otion1, .otion2").hide();
$("select").change(function() {
var $this = $(this);
if($this.val() === "1") {
$(".otion1").show();
$(".otion2").hide();
} else if($this.val() === "2") {
$(".otion1").hide();
$(".otion2").show();
} else {
$(".otion1, .otion2").hide();
}
});
// prevent hidden checkboxes from being submitted
$("form").submit(function() {
$(this).find("input[type='checkbox']").filter(":hidden").each(function() {
this.checked = false;
});
});
and add some values to your select options:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
See edited demo: http://jsbin.com/acOXisI/23/edit
Try:
jQuery("#selector option:selected").val();
Or to get the text of the option, use text():
jQuery("#selector option:selected").text();
More Info:
http://api.jquery.com/val/
http://api.jquery.com/text/
First off, you shouldn't have duplicate ids on the page.
Also, I'd suggest you put unique input names for all the checkboxes and always submit all of them from a single form (and you'd ignore those you don't need). The functionality you want can be achieved in many ways, one of them being hiding both fieldsets and setting a listener to the select element - you can use the onchange event, and check which one is selected and according to that show the appropriate fieldset.
When you check the submitted data, first check the select value, and then only the appropriate checkboxes.
You have to use jQuery:
$().ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").text();
console.log(value)
if (value == 'Option 1'){
$('.otion1').show()
$('.otion2').hide()
}
else{
$('.otion1').hide()
$('.otion2').show()
}
})
})
There is your bin cloned and working:
http://jsbin.com/UcaWUCA/1/edit
You can do this with jQuery. Note that hidden fields will still get submitted so they need disabling too:
$(function(){
$("#selector").on("change", function(){
$(".otion1, .otion2").hide().find("input").attr("disabled","disabled");
$("."+$(this).val()).show().find("input").removeAttr("disabled");
});
$("#selector").trigger("change");//run on load
});
http://jsbin.com/aVihIJOr/1/edit
Hi you can use $("#selector").val() to get the selected option.
$("#selector").change(function(){
option = $(this).val();
if(option == 1){
$(".option1").show();
$(".option2").hide();
} else if(option == 2) {
$(".option2").show();
$(".option1").hide();
} else {
$(".option2").hide();
$(".option1").hide();
}
});
Working example:
http://jsbin.com/acOXisI/10/edit?html,js,output
I have added unique Div Ids to your options sets and then have linked them with the exact selected value.
Example:
http://jsbin.com/acOXisI/18/edit
$(document).ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").val();
if (value == 'option1'){
$('#option1').show();
$('#option2').hide();
}
else if(value == 'option2'){
$('#option1').hide();
$('#option2').show();
}else{
$('#option1').show();
$('#option2').show();
}
});
});
I'm trying to highlight the selected value from a dropdown list, which works... but when you select another item from the list, that gets highlighted as well. It keeps on adding to other items as you select them. How do I remove it from the old <option> when the new <option> is selected? Check out my JSFiddle here. I know I'm supposed to use an if/else statement, but not sure how.
Remove the class from the other elements first.
Fork: http://jsfiddle.net/CzuGF/
Line 3:
$('select option').removeClass('highlight');
see the demo
var highlighted="";
$(function () {
$('#places').change(function () {
//if there is a previous selection, then remove highlight class
if(highlighted!="")
$('select option:contains(' + highlighted+ ')').removeClass('highlight')
//store the current selection in temp var
highlighted=$(this).val();
$('select option:contains(' + $(this).val() + ')').addClass('highlight')
})
})
This code work like a charm and can be reused if you have multiple select :
$(function () {
$('select').change(function () { //Can change the selector to you input class if you want, doesnt matter
$(this).find('.highlight').removeClass('highlight');
$(this).find('option:contains(' + $(this).val() + ')').addClass('highlight');
})
})
Fiddle : http://jsfiddle.net/t4Vhd/5/
OR
$(function () {
$('select').change(function () { //Can change the selector to you input class if you want, doesnt matter
$(this).find('option:contains(' + $(this).val() + ')').addClass('highlight').siblings().removeClass('highlight');
})
})
Add this line in your code, before you add the class.
$(this).find(".highlight").removeClass("highlight");
Demo: http://jsfiddle.net/tymeJV/t4Vhd/2/
How would you write a script to disable a select if you have two selects (both with ids) and an option in the first select is selected.
Since you have tagged the question with jQuery, I'll give you an idea of how to do it using jQuery:
$("#firstSelectId").change(function() {
var first = $(this);
$("#secondSelectId").prop("disabled", function() {
return first.val() === "whatever";
});
});
Note that the above assumes you want to enable the second select again if a different option was selected. Here's a working example.
How about:
$('#first').change(function() {
if ($(this).val() != '') { // '' is default value??
$('#second').attr('disabled', 'disabled');
} else {
$('#second').removeAttr('disabled');
}
});
use something like:
if($("#selectbox1 option:selected").val() == ...)
to see what was selected.
and then use
$("#selectbox2").attr('disabled', 'disabled');
to disable that other box.