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()
});
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 would like to show a message when someone makes a specific selection from an HTML dropdown list. I have this so far:
<select name="configoption[56]" onchange="recalctotals()">
<option value="235"">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
And the script:
$(document).ready(function() {
$('#configoption[56]').change(function() {
var selectedValue = $('#configoption[56]').find(":selected").text();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
The above does not appear to be working for me, any suggestions? I would also like to be able to show the message on multiple selected values.
Well your .change function is specifically binded to an element with id="configoption[56]" So just add id to your select element as below
<select name="configoption[56]" id="configoption[56]" onchange="recalctotals()">
//Options
</select>
UPDATE
As per #T.J.Crowder's suggestion on invalid selector I would like to modify a slight change on the id. You can use configoption56 as id and write your select.change as follows:
<select name="configoption[56]" id="configoption56" onchange="recalctotals()">
<!--Options-->
</select>
.change
$('#configoption56').change(function() {
//other codes
});
$('#configoption[56]') is looking for an element with the id, not name, configoption[56] (or it would be, but the selector is invalid, you'd have to escape those brackets).
To use the name:
$('select[name="configoption[56]"]')...
Separately, you can just use val, you don't have to use find to get the selected option. You can also use toggle for show/hide:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
$('.message').toggle($(this).val() == '235');
});
});
Re your comment about toggling based on || and two values:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
var value = $(this).val();
$('.message').toggle(value == '235' || value == '123');
});
});
I should be doing it like this: http://jsfiddle.net/nmn17cr6/
HTML:
<select name="configoption[56]" id="configoption" onchange="recalctotals()">
<option value="1">Dummy</option>
<option value="235">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
CSS:
.message {
display:none;
}
jQuery:
$(document).ready(function() {
$('#configoption').change(function() {
var selectedValue = $(this).val();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
Your approach needs a little modification. All you had to do these changes
$(document).ready(function() {
$("select[name=configoption[56]]").change(function() { // change jquery selector for name
var selectedValue = $('#configoption[56]').val(); // and val to get the value
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
And with the same jQuery code. below has to be
<select name="configoption[56]" >
// onchange="recalctotals()"> was not required
I have a drop down select box and input text box. Select box display my categories and its look like this:
<select id="category" name="category">
<option value="">Please select...</option>
<option value="1">Category-1</option>
<option value="2">Category-2</option>
<option value="3">Category-3</option>
<option value="4">Other</option>
</select>
Input text box is like this:
<input type="text" id="otherCategory" name="otherCategory" value="" style="display: none;">
My question is. when an user select only "Other" from dropdown then I need to populate the input text.
I tried it something like this:
$(document).ready(function() {
$('#category').change(function() {
var myValue = $(this).val();
var myText = $("#category :selected").text();
if (myText != '' AND myText == "Other") {
$("#otherCategory").show();
}
});
});
But I couldn't get it to work. Can anybody tell how I figure this out.
NOTE: my dropdown select populating dynamically.
Thank you.
You are missing && in if condition. Also, your condition
myText != '' is redundant and not required.
And you need to hide the input when selection changed.
$(document).ready(function () {
$('#category').on('change', function () {
var myValue = $(this).val();
var myText = $.trim($("#category :selected").text()).toLowerCase(); // Trim spaces and convert to lowercase for comparison
$("#otherCategory").toggle(myText === 'other');
});
});
Demo: https://jsfiddle.net/tusharj/8ykfmtyt/1/
You need to use && instead of AND
Live Demo
if (myText != '' && myText === "Other") {
$("#otherCategory").show();
}
You can further optimize it by hiding with option other then 'other' is selcted.
You do not need to check if it is not empty when you are comparing it with string 'other' so I removed that condition from if statement.
Live Demo
$('#category').change(function () {
$(this).find(":selected").text() === "Other" ?
$("#otherCategory").show() : $("#otherCategory").hide();
});
Try this Demo, if user selects other option showing input field else hiding.
$(document).ready(function() {
$('#category').change(function() {
var myValue = $(this).val();
var myText = $("#category :selected").text();
if (myText == "Other") {
$("#otherCategory").show();
}
else{
$("#otherCategory").hide();
}
});
});
I want to hide a table row based on the value selected from a radio button.
Those radio buttons were created based on value selected from a dropdown list box.
Here is my code
HTML code for listbox
<select name="txtLT" id="LT" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Jquery
$(document).ready(function() {
$("#LT").change(function() {
var selVal = $(this).val();
$("#tblerow").html('');
if(selVal == 'c') {
$("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof" name="cmpof" value="2" onclick="hide()"/>2</td>');
}
});
});
Now if radio button 2 is selected, then the table row with tr2 should disappear.
Please help me to find the solution.
EDIT
I tried the following JavaScript, but it does not hide the row.
function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }
Could you please suggest what is wrong here?
You can just use the hide and show function of jQuery like so:
$(function () {
$('#LT').change(function () {
if ($(this).val() == 'c') {
$('.radios').show();
} else {
$('.radios').hide();
}
});
$('input[name=cmpof]').change(function () {
if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
$('#table tr').eq(1).hide();
} else {
$('#table tr').eq(1).show();
}
});
});
If you don't want the table row to show up by default, just do it with css.
JsFiddle example: http://jsfiddle.net/AX5TJ/1/
Updated version that may be closer to what you want: http://jsfiddle.net/AX5TJ/2/
Also be carefull, you have a syntax error in your script : when you define $("#LT").change(function() {, you have to close with });
Using jquery, I need to set the class of a div using a select list.
For instance:
<select name="id[3]" id="id[3]">
<option value="11">- Please Select -</option>
<option value="16">Something</option>
<option value="15">Something else</option>
<option value="13">Etc...</option>
</select>
And this is the div that needs the class to be updated:
<div id="textpreview" class="textpreview"></div>
I have tried this code but I'm afraid my understanding of jquery is lacking:
$('#id\\[3\\]').change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
if (str==16){
$("#textpreview").attr('class', 'sixteen');
}
})
.trigger('change');
Any ideas?
I think you want to do what I have in this jsfiddle. The code goes like this:
$('#id\\[3\\]').change(function () {
if ($(this).val() === "16"){
$("#textpreview").addClass('sixteen');
} else
{
$("#textpreview").removeClass('sixteen');
}
}).trigger('change');
var $textpreview = $("#textpreview");
$('#id\\[3\\]').change(function() {
var val = $(this).val();
if (val == 16)
$textpreview.addClass('sixteen');
else
$textpreview.removeClass('sixteen');
});