have this code, i want to convert it to be able to allow the user to pick ANY possible select and have div [id='setprice'] show up or something to that effect. currently i have 4 options, but it could be up to 10+ depends on how many are in the database. but it shouldn't matter, i just want which ever gets selected to open the setprice div. Thanks.
$("#category").change(function () {
$("#setprice").hide();
if ($(this).val() == "cow") { $("[id='setprice']").show(); }
else if ($(this).val() == "dog") { $("[id='setprice']").show(); }
else if ($(this).val() == "monkey") { $("[id='setprice']").show(); }
else if ($(this).val() == "kungfoo") { $("[id='setprice']").show(); }
});
HTML
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice'>this is hidden onload, then shows on any #category selection</div>
Seems to be alot of cofusion in what im asking, These options i've given are random names, the categories that are going to be loaded, are from a database and more could be added depending how it expands, so i want the script to not show div=setprice, but when anything gets selected in #category to open setprice.
You will need to call the function only when the value of the select box isn't empty.
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
Here is a working fiddle.
This is the cleanest you will get this.
DEMO
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
The $("#setprice").toggle(!!this.value); is just a way to use a boolean inside the .toggle() method,
otherwise you do it equally like:
var $setPriceEl = $("#setprice");
$("#category").change(function () {
$setPriceEl.hide(); // hide by default
if(this.value) $setPriceEl.show(); // show only if has value
});
or even:
$("#category").change(function () {
$("#setprice")[this.value ? "show" : "hide" ]();
});
Please find the answer below ...
HTML :
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice' style="display:none;">this is hidden onload,
then shows on any #category selection</div>
JQUERY :
$(document).ready(function(){
$("#category").change(function() {
$("#category option:selected" ).each(function() {
var str = $( this ).text();
if(str == "Select"){
$("#setprice").hide();
}else{
$("#setprice").show();
$("#setprice").text(str);
}
});
}).trigger("change");
});
Related
So I have a dropdown menu. The id for this dropdown menu is "courses". This dropdown also has an additional attribute, onclick="displayField();
The dropdown has 2 options.
2 and 3.
Now, I want everything with the class rsform-block-cotecours1 to be hidden depending on which option is chosen.
Here is the JavaScript for that:
function displayField()
{
if(document.getElementById("courses").text == '2';)
document.getElementsByClassName('rsform-block-cotecours1').style.display="none";
if(document.getElementById("courses").text == '3';)
document.getElementsByClassName('rsform-block-cotecours1').style.display="";
}
window.addEvent('domready', function() {
displayField();
});
However, this doesn't work, and I don't know why.
Is this what you are looking for?
Fiddle: fiddle
<select id="courses" onchange="ddlChange()">
<option value="2">2</option>
<option value="3">3</option>
</select>
JavaScript
function ddlChange() {
if (document.getElementById("courses").value =="2"){
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none";
alert(document.getElementById("courses").value );
}
if (document.getElementById("courses").value == "3"){
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="block";
alert(document.getElementById("courses").value );
}
}
Change the code to following and test
function displayField()
{
if(document.getElementById("courses").value == '2';)
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none";
if(document.getElementById("courses").value == '3';)
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="";
}
window.addEvent('domready', function() {
displayField();
});
in case you want to access the ext and not the value of dropdown list in javascript, then use following code to access the text of selected option from drop down
var courseElement = document.getElementById("courses");
var text = "";
if (courseElement.selectedIndex != -1)
{
text = courseElement.options[courseElement.selectedIndex].text;
}
I have the following code in my html > body:
<select class="btntabla" id="opciones" style="height: 32px;">
<option selected id="mostrartodo" >Mostrar todo</option>
<option id="mostrargrafica" >Mostrar solo gráfica</option>
<option id="mostrartabulacion" >Mostrar solo tabulación</option>
<option id="solografica" >Ocultar solo gráfica</option>
<option id="solotabulacion" >Ocultar solo tabulación</option>
</select>
I'm trying with jquery something like this in my html > head:
<script type="text/javascript" >
$("#mostrartodo").click(function() {
alert("hola");
});
</script>
I want to give you click on a "option" of "select" display an "alert"
How I can do that?
Listen to the change event on your select:
$('#opciones').on('change', function (event) {
// Will always be triggered when the select changes ...
alert('hola');
// .. so you should check for the value
// (please add some value attribute to your options)
if ($(this).find('option:selected').val() === '1') {
alert('HOLA');
}
});
$("#opciones").on('change',function() {
alert($(this).find("option:selected").text()+' clicked!');
});
Do like this...
this is not a correct way to do...
$("#opciones").click(function() {
var value = $(this).text();
if (value == 'Mostrar todo'){
alert('hola');
}
});
Hope this will work...
I have a dropdown list,
<select id="bi_tool_y_axis" name="bi_tool[y_axis]">
<option value="0">Vote Count</option>
<option selected="selected" value="1">Choices of Poll</option>
<option value="2">Location</option>
</select>
and a jquery function to change option text of value 2 in the above dropdown list
function change_text_of_value_2(new_text){
// I want to change text "Location" with new_text in the dropdown list
}
How can I do this? Please help..
why not simply
$("#bi_tool_y_axis option[value='2']").text("anything else");
And this you call into function (your function and put the parameter into text function);
Or
function change_text(optionValue, new_text){
$("#bi_tool_y_axis option[value='"+optionValue+"']").text(new_text);
}
try this
function change_text_of_value_2(new_text){
$("#bi_tool_y_axis option[value='2']").text(new_text);
}
Try this
$(function() {
$('#bi_tool_y_axis').on('change', function() {
if ($(this).val() == '2') {
change_text_of_value_2($(this), "New_Text_Added")
}
});
});
function change_text_of_value_2($elem, new_text) {
$elem.find("option[value='2']").text(new_text);
}
Check FIDDLE
Been having lot's of trouble with this one. Let's say I had the following html:
<div id='step_1'>
<select name='select_1' id='choose'>
<option value='select one'>Select One</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<select name='select_2' id='choose_again'>
<option value='select one'>Select One</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<button id='submit'>button</button>
</div>
I have many of these, so what I'm trying to do is return false if ANY 'select' has the value of 'Select One' then alert them. The jQuery i have so far looks as so:
$('#submit').click(function() {
if ($('#step_1 select[value="select one"]').length() == 0) {
//succeed
} else {
alert('Please select yes or no!');
return false;
}
});
What am I doing wrong? Thanks in advance, I love this website! :)
$('#submit').click(function(e) {
var flag = true;
$('select').each(function(){
if($(this).val() == "select one"){
alert("please select a value in " + $(this).attr("name"));
flag = false;
}
});
if(flag){
alert('perfect');
}else{
e.preventDefault();
}
});
EXAMPLE : http://jsfiddle.net/raj_er04/3kHVY/1/
Quick note: If you want the alert to only show once rather than once per each 'select one', simply move the alert() into the else{ statement. thanks again for this answer!
You can do this with $.each():
$('#step_1').find('SELECT').each( function() {
if( $(this).val() === 'select one' ) {
alert('Please select yes or no!');
return false;
}
});
Note that returning false will prevent the loop from continuing once a missing field is found.
Your test fails because length is not a method. It is a property. Remove the (). If you look in your debugger you should see a warning about this.
Also, your selector should be checking the selected option, not the select list itself.
http://jsfiddle.net/7PPs4/
$('#submit').click(function() {
$foo = $('#step_1 select option:selected[value="select one"]');
alert($foo.length);
});
This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/
<script>
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem
http://jsfiddle.net/Wx8Jf/2
$(document).ready(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
});
Couple problems:
You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.
Working version:
<script>
$(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').hide();
}
else {
$('#tid-acc').show();
}
});
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc" />
http://jsfiddle.net/dbrecht/QwkKf/
Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/
HTML:
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Javascript:
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});