// In jquery
$('.check').val('two').trigger('change');
// and html is
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>
http://jsfiddle.net/v7QWd/353/
I need trigger the event using my text value i.e. "First" in jquery. Any solution of it? Here I have used .val('two') instead I wish to use "First"..
I think what you are trying to do is to select the option by its text, if so you can use :contains() - but it can give expected matches since it will use partial matches
So try
$(function() {
$('.check').change(function() {
var data = $(this).val();
snippet.log('data:' + data)
//if you want the selected text
var text = $(this).find('option:selected').text();
snippet.log('text:' + text)
});
$('.check option').filter(function() {
return $(this).text() == 'Second'
}).prop('selected', true)
$('.check').trigger('change');
});
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>
if ($('.check option:selected').text() == "First") {
$('.check').trigger('change');
}
$(function () {
//change to two ? how?
$('.check').change(function () {
var data = $(this).val();
alert(data);
});
if ($('.check option:selected').text() == "First") {
$('.check').trigger('change');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>
Use .text() to get the selected option text and .change() to trigger initially on load
$('.check').change(function(){
var data= $(this).find("option:selected").text();
if(data == 'First'){
// your logic
}
}).change();
Fiddle
Related
I have a Country select box that display a State select box if the USA is selected. I am using the following jQuery to achieve this:
$(function() {
$('#country').change(function(){
$('.state').hide();
$('#' + $(this).val()).show();
}).trigger('change');
});
Is there a way that I can amend the above to also add the required attribute to the State select box if the USA is selected?
The State select box is within the following DIV
<div id="USA" class="state" style="display:none">
</div>
Many thanks,
John
Use the prop() method for that:
$("#country").on("change", function() {
let $state = $("#state");
if ($(this).val() == "EUA") {
$state.prop("required", "required");
}
else {
$state.prop("required", null);
}
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select id="country">
<option>EUA</option>
<option>Other</option>
</select>
<select id="state">
<option></option>
<option>A</option>
<option>B</option>
</select>
<button>Save</button>
</form>
prop("required", "required") to add the property;
prop("required", null) to remove it.
You may need to check for the selected value first, then you could use prop()/removeProp() :
$(function() {
$('#country').change(function(){
var selected_value = $(this).val();
var state = $(".state");
var related_elem = $('#' + selected_value);
if( selected_value === 'USA' ){
state.prop('required', true).show();
related_elem.show();
}else{
state.removeProp('required').hide();
related_elem.hide();
}
}).trigger('change');
});
I have the following code that does not seem to work:
$('.chosen-select').on('change', function() {
if ('.chosen-select'.value == '1') {
$("#tips").html("the color that you want to add.");
} else if ('.chosen-select'.value == '2') {
$("#tips").html("the text that you want to add.");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
<option value="1">change background colour</option>
<option value="2">insert text</option>
<option value="3">insert arrow</option>
</select>
My web browser console is not giving me any error. The code is suppose to change the html of the div based on changing the select option value.
This '.chosen-select'.value won't work as it's neither a valid jQuery expression nor JavaScript. Instead use $('.chosen-select').val(), this.value or $(this).val().
jsFiddle example
Use if($(this).val() == '1') { not as if('.chosen-select'.value == '1')
$(function() {
$('.chosen-select').on('change', function() {
if($(this).val() == '1') {$("#tips").html( "the color that you want to add.");}
else if($(this).val() == '2') {$("#tips").html( "the text that you want to add.");}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
<option value="1">change background colour</option>
<option value="2">insert text</option>
<option value="3">insert arrow</option>
</select>
The below expression doesn't yield the results you want:
'.chosen-select'.value
It attempts to access the value property of a String object, which is undefined, because strings don't have such properties.
Within the change event handler function, you can make good use of the fact that this references the <select> element:
var selectedValue = this.value; // get value from select element
Alternatively, use jQuery's .val() function to get the value:
var selectedValue = $(this).val();
I'm trying to apply a show/hide jQuery function to a html drop down box. I want to be able to hide one option and show another when an option from the drop down is selected. This jQuery works with a normal button but not the drop down.
<select style="margin-left:30px;">
<option value="" selected="selected">Please select a region</option>
<option id="uk_btn" value="1">UK</option>
<option id="usa_btn" value="2">USA</option>
</select>
<script>
$("#usa_btn").click(function(){
$("#usa_tbl").show();
$("#uk_tbl").hide();
});
</script>
<script>
$("#uk_btn").click(function(){
$("#uk_tbl").show();
$("#usa_tbl").hide();
});
</script>
You need to put the event for the select box like
$('select').change(function(){
var val = $(this + 'option:selected').attr('id');
if(val == 'uk_btn') {
$("#usa_tbl").hide();
$("#uk_tbl").show();
} elseif(val == 'usa_btn') {
$("#uk_tbl").hide();
$("#usa_tbl").show();
}
});
You can also check using value of the check box like
var val = $(this).val();
if(val == '1') {
$("#usa_tbl").hide();
$("#uk_tbl").show();
} elseif (val == '2') {
$("#uk_tbl").hide();
$("#usa_tbl").show();
}
You can do this:
// Cache the elements first
var $usa_tbl = $("#usa_tbl");
var $uk_tbl = $("#uk_tbl");
// Add a change event handler for the select element
$("#select_ID").change(function () {
if (this.value === '2') {
$usa_tbl.show();
$uk_tbl.hide();
} else if (this.value === '1') {
$uk_tbl.show();
$usa_tbl.hide();
} else {
$uk_tbl.hide();
$usa_tbl.hide();
}
});
where, select_ID is the ID of the select element.
Fiddle Demo
if you have no id on select then you can try
$('select').change(function(){
var val = $(this ).val();
if(val == 2) {
$("#usa_tbl").show();
$("#uk_tbl").hide();
} else {
$("#uk_tbl").show();
$("#usa_tbl").hide();
}
});
or you can do by id
<select id="select_id" style="margin-left:30px;">
now
$('#select_id').change(function(){
....same as previous
});
Root cause: There is no id matching for select in your js.
<select style="margin-left:30px;"> //id attribute is missing
instead use change event handler
<select style="margin-left:30px;" id="usa_btn">
JS:
$("#usa_btn").change(function(){
alert($(this).val()); // to get the value of selected option based on it
// add your condition
$("#usa_tbl").show();
$("#uk_tbl").hide();
});
<select id="country" style="margin-left:30px;">
then
$("#country").change(function(){
$('[id$="_tbl"]').hide();
$('#' + this.value.replace('_btn', '_tbl')) .show()
});
Hello everyone how can I get two values from different select boxes? I get first value in my select box but I can't get the second value from another select box.Here is my javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var select = document.forms[0].sel;
var select2=document.forms[0].sel2;
select.onchange = function () {
var value = select.options[select.selectedIndex].value; // to get Value
alert(value);
}
select2.onchange = function () {
var value2 = select2.options[select2.selectedIndex].value; // to get Value
alert(value2);
}
});
</script>
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<form>
<SELECT NAME="sel2" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
The second select box is in the second form. So:
var select2 = document.forms[1].sel2;
That said, you can actually use jQuery for these things:
// bind a change event handler to the second select
$("select").eq(1).on("change", function() {
alert( $(this).val() );
});
jQuery Tip - Getting Select List Values
var foo = [];
$('#multiple :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
$(document).ready(function () {
$('#sel').change(function(){ $('#sel option:selected').val(); });
give id to your select control
<SELECT id="sel">
with help of jQuery ( i suggest the logic, not the solution )
$(document).on('change', 'select', function(){
var selecetdOption = $(this).val();
alert(selecetdOption );
});
Working Demo
You have wrong into your javascript because you have put
var select2=document.forms[0].sel2;
try to put
var select2=document.forms[1].sel2;
and it works!
I have a question about jQuery. Let's say I have a dropdown list:
<select id="Positions" name="PositionType">
<option value="Manager">Manager</option>
<option value="Janitor">Janitor</option>
<option value="Cook">Cook</option>
<option value="Cashier">Cashier</option>
<option value="Other">Other</option>
</select>
How could I display an alert box when "other" is selected? So far this does not work:
<script type="text/javascript">
$(document).ready(function(){
$("#position").change(function(){
if($("#position option:selected").val() == "other"){
alert("hello world");
}
else {
}
});
});
</script>
Two things. First, as others have mentioned, "other" needs to be uppercase as string comparison is case sensitive. Second, you could retrieve the value of a select much easier:
<script type="text/javascript">
$(document).ready(function(){
$("#position").change(function(){
if($(this).val() == "Other"){
alert("hello world");
}
else {
}
});
});
</script>
A select element's value is equal to the value of it's selected option :-)
In your script, try "Other" with capital-O.