We Keep Coding

Enable / Disable dropdown list based on another dropdown list

I have two dropdown lists.
<select id="cat_user">
<option value="Super Admin">Super Admin</option>
<option value="Event Admin">Event Admin</option>
</select>
<select id="event_name">
<option value="ICT">ICT</option>
<option value="Fun Run">Fun Run</option>
</select>
I want that the second drop-down list should get enabled only if we choose Event Admin in the first drop-down list. It should again get disabled if we deselect the Event Admin from the first drop-down list.
May I know how can this be achieved using javascript?

You just need to handle dropdown change event.
<script>
$('#cat_user').change(function(){
if($('#cat_user option:selected').text() == "Event Admin")
{
$('#event_name').prop('disabled',false);
}
else
{
$('#event_name').prop('disabled',true);
}
});
</script>
you can refere below link for working demo
https://jsfiddle.net/t7jswp8r/

If you don't want to use jquery, you can do something like this in your Javascript,
document.getElementById('event_name').disabled = true;
document.getElementById('cat_user').addEventListener('change', function(event) {
if(event.target.value === "Event Admin") {
document.getElementById('event_name').disabled = false;
} else {
document.getElementById('event_name').disabled = true;
}
})

Select Drop down Form Validation (Display text)

I am trying to validate a form.
What I am trying to do is validate the form by validating the Option display text not the option value, since the option values are int
Example:
<option value="selectcard">Please select</option>
If user clicks submit the form should validate if the option display says Please Select
regardless of what the option value is.
Code which is not working
function fun(){
$('#cardtype').change(function () {
var sel = $('option:selected', this).text();
if (sel == "Please select") {
$('.showotherpDescription').show();
} else {
}
});
}
Not working: http://jsfiddle.net/f5hxpo7g/2/
Also including the regular working example for validating the form based on option value
Validates Based on option value http://jsfiddle.net/f5hxpo7g/1/
Please let me know what i am doing wrong.
Thanks in advance.

Your function should be like this:
function fun()
{
var ddl = document.getElementById("cardtype");
var valor = ddl.options[ddl.selectedIndex].text;
if (valor == "--- Please select ---")
{
alert("Please select a card type");
}
}
Working fiddle:http://jsfiddle.net/robertrozas/XFtBD/169/

I fixed it, you should use this JS:
$(function () {
$('#subbutton').click(function () {
if ($('#cardtype option:selected').text() === "Please select")
{
alert("PLEASE SELECT");
}
});
});
And remove onclick="..." from the button, you don't need it. Also add id="subbutton.
Here's the working JSFiddle.

I checked out the jsfiddle you referenced and modified it slightly to make it work, you can see it here.
The issue with the code you provided is, IMO:
An issue with the purpose of your function (validation) and the event you're subscribing the code to (the combo selection changed event)
The way you're obtaining the text from the currently selected option, you should create the selector based on the element that contains the options, otherwise, if you have more than 1 combo in your page, you will get lots of values (one for each selected option).
Check out the code in the jsfiddle i provided and let me know if you need more information.
For reference, here is the code i used:
HTML:
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select>
<input type="button" onclick="fun()" value="click here">
JS:
function fun(){
var cmb = document.getElementById('cardtype');
var sel = cmb.options[cmb.selectedIndex].text;
if (sel == "--- Please select ---") {
alert('Please select a different option');
//$('.showotherpDescription').show();
} else {
}
}
}

jQuery: If user changes select to specific option then change different input value

I have a select box like so:
<select id="update_type_picker" name="update_type_picker">
<option value="play">Played</option>
<option value="play">playing</option>
<option value="want">Want</option>
<option value="rating">Rate</option>
</select>
And an input like this:
<input id="playing" name="playing" type="hidden">
And I'm trying to make this jquery work:
$(document).ready(function () {
$("select#update_type_picker").change( function() {
var text = this.text;
if (text = "playing") {
$("input#playing").attr('value', '1');
} else {
$("input#playing").attr('value', '');
}
});
});
I need to use text (not value) because two of the values are the same. With the jquery above the input value changes to 1 regardless of which option I choose. How can I make this work they way I need it to? Thanks!

You have to use:
var text = $(this).find("option:selected").text();
And as mentioned in a comment, you have to use == or === to compare strings in the if, not =.

jquery change function hide and show div

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");
});

How to change text of specific option in a dropdown list?

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