We Keep Coding

Using a variable as JQuery selector

I have a dropdown/select menu that shows and hides various divs based on what the user has selected. Within each div there is another dropdown/select menu that I would like to also trigger an action on change.
As this div is given an ID dynamically I am struggling to figure out how to select the required dropdown/select menu.
Here is the jQuery code:
$(document).ready(function(){
$("#category").change(function(){
var category = $("#category").val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
}) ;
var category = $("#category").val();
var selector = 'selector_'+category;
$("#"+selector).change(function(){
alert('Do something');
});
});
And some simplified HTML:
<select id='category'>
<option value='0'>1</option>
<option value='1'>2</option>
<option value='2'>3</option>
</select>
<div class='box class-name' id='1'>
<select id='selector_1'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
<div class='box class-name' id='2'>
<select id='selector_2'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
<div class='box class-name' id='3'>
<select id='selector_3'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
The divs show and hide as desired, but I can't for the life of me get the alert('Do Something'); to trigger which I assume is a problem with how I am trying to select the dropdown/select menu.
All help much appreciated!
Cheers, DB.

You need chain the changes. The way you made it, the code runs all at once, meaning:
When document ready, do:
Set onChange in the #category element
Find category current value (right now, none is selected, so value is undefined)
Set selector to "selector_" + undefined
Find element with id selector, since there's no element with this id, no change is defined.
Try this, instead:
$(document).ready(function() {
var categoryField = $("#category");
categoryField.change(function() {
var category = categoryField.val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
var selector = 'selector_'+category;
$("#"+selector).change(function() {
alert('Do something');
});
});
});

var category = $("#category").val();
Category is empty on page loaded.
Simple solution:
$(".box select").change(function(){
alert('Do something');
});

I checked, it's working
$("#category").change(function(){
var category = $("#category").val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
var s = $(box).find('select');
$(s).bind("change", function() {
alert("Do something");
})
})

Within each div there is another dropdown/select menu that I would
like to also trigger an action on change.
It seems you are looking to trigger event when there is a change in the dropdowns wrapped by the div
If it is so you can use jquery wild card selector
In your case all those select elements have same prefix id.
So $("[id^=selector_]") will response to to any select box which have such string as prefix
$("[id^=selector_").change(function(event){
$("#demoUp").text($(this).context.value);
});
Check this JSFIDDLE. The placeholder will be updated by the value of selectd option

To point you have change the id on document page ,use below
$(document).on("change",$("#"+selector),function(){
alert('Do something');
});

Try this:
$(document).ready(function(){
$("#category").change(function(){
var category = $(this).val();
$('.class-name').hide();
$('#'+ category).show();
$("#selector_"+category).change(function(){
alert('Do something');
});
}) ;
});

Remove "selected" from an option of a dropdown

I am working on a form. One of my colleagues have used the are_you_sure.js which confirms to leave before saving a form.
Now the problem is if I have a dropdown say like this
<script type="text/javascript">
function get_cpc(cst_type)
{
if(cst_type==0 || cst_type==1)
{
$("#camp_cpc").show();
$("#camp_cpc").val("'.(!empty( $html['camp_cpc'] )?(double)$html['camp_cpc']:'').'");
}
else
{
$("#camp_cpc").hide();
$("#camp_cpc").val("0");
}
}
</script>
<select name="cost_type" id="cost_type" onchange="get_cpc(this.value);" class="ultra-select">
<option value="0">CPC</option>
<option value="1" selected="selected">CPA</option>
<option value="2">Do Not Track</option>
</select>
When I am switching from non-selected options to selected option, then the change of state takes too much time
This means if I am selecting CPC/Do Not Track from CPA, then the dropdown works fast. But if I am selecting CPA from CPC/Do Not Track, then the state change takes almost 4 seconds..
That's due to the jquery.are-you-sure.js. So, I need to remove the select from the dropdown. How can I achieve this?
I put this code, $("select option").prop("selected", false);
but it doesn't even let me select any other option.

I'm not sure what you mean exacly, but can you share the are_you_sure.js file?¿
Also I have change your code maybe it helps and it´s a better way to do it. because it´s not a good practice use onchange(), so remove onchange from your html and do this, link: http://jsfiddle.net/hg5nz1w6/1/
js:
$(document).ready(function(){
$('#cost_type').on('change', function(){
var cst_type = $(this).val();
if(cst_type==0 || cst_type==1)
{
$("#camp_cpc").val("'.(!empty( $html['camp_cpc'] )?(double)$html['camp_cpc']:'').'");
$("#camp_cpc").show();
}
else
{
$("#camp_cpc").hide();
$("#camp_cpc").val("0");
}
});
});
html:
<select name="cost_type" id="cost_type" class="ultra-select">
<option value="0">CPC</option>
<option value="1" selected="selected">CPA</option>
<option value="2">Do Not Track</option>
</select>
Below you can see some examples to remove the selected:
document.getElementById('myselect').selectedIndex = -1;
you can deselect all the options:
$("select").val([]);
or
$("select option").prop("selected", false);
Hope it´s helps!

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 to show/hide Divs Issue

I am running a SQL query to get dropdown select value. The values are now int.
What I need to do is show the div when Dropdown Value is "Other"
So I am using this Jquery code to get the text of the dropdown that is selected. Which is working fine.
Working Example Fiddle
<select name="hours" id="hours" class="time">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">Other</option>
<option value="06">06</option>
</select>
Script
<script type="text/javascript">
$('#hours').change(function() {
$('#hours_text').val( this.value );
$('#hours_text2').val($('option:selected',this).text());
});
</script>
The issue is when I am hiding the div. The text is not passing into Jquery. Its only accepting the option value. I need it to accept the text value which is "Other" not 05
Before the values were varchar so this was not an issue before.
Here is the code for hiding and showing Div.(not working) Fiddle
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
$('#' + $(this).val()).show.text();
});

Try this:
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
$('#' + $('option:selected', this).text()).show();
});
DEMO

the property for checking the text contained by the option would be .html() not .val()

Could you do something like this:
$('#hours').change(function () {
var sel = $('option:selected', this).text();
if (sel == "Other") {
$('.showotherpDescription').show();
} else {
$('.showotherpDescription').hide();
}
});

Here, this should do the trick. I added some console output so you can see what and why:
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
console.log($(this).val());
console.log(this.selectedIndex);
console.log(this.options[this.selectedIndex]);
console.log(this.options[this.selectedIndex].innerHTML);
$('#' + this.options[this.selectedIndex].innerHTML).show();
});

Displaying option selected from dropdownlist

Trying something that sounds simple but not working:
Allow a user to select an option from a dropdownlist and then have this displayed as an alert each time the user changes it. Here's what I've got so far:
<select name="pickSort" id="chooseSort" onchange="changedOption">
<option value="lowHigh" id="lowHigh">Price Low-High</option>
<option value="highLow" id="lowHigh">Price High-Low</option>
</select>
<script>
function changedOption() {
var sel = document.getElementsByName('pickSort');
var sv = sel.value;
alert(sv);
}
</script>

A better way of doing this without the inline stuff:
document.getElementById("chooseSort").onchange = function() {
alert(this.value);
};
jsFiddle here.

You need to call the function with parentheses changedOption()
<select name="pickSort" id="chooseSort" onchange="changedOption()">