Develop Reference

How to make a <div> show only when a certain <select> dropdown option is selected? The <select> options are populated with the ng-repeat directive

I have a select dropdown list populated with the angularjs ng-repeat directive. I would like for a div to show only when a certain option is selected.
Here is the code:
<select type="text"
class="form-control"
ng-model="vm.request.requestType"
name="requestType" id="requestType"
placeholder=""
required>
<option selected></option>
<option value="test">test</option>
<option ng-repeat="requestType in vm.requestTypes">{{requestType}}</option>
</select>
<script>
$(function() {
$("#requestType").change(function () {
if ($("#test").is(":selected")) {
$("#continueCheckbox").show();
} else {
$("#continueCheckbox").hide();
}
}).trigger('change');
});
</script>
<div id="continueCheckbox">
<input type="checkbox"
name="continueCheckbox"
value="continueCheckbox">
Check this box to continue, and to confirm that you have read the
Documentation
</div>
The "test" option is just for testing if the function works. Currently, the checkbox displays no matter what is selected, and never disappears.

I highly recommend not mixing AngularJS and jQuery. Both are DOM manipulation frameworks and do not work well together. Here is one way you could accomplish what you are after with AngularJS:
<div id="continueCheckbox" ng-if="vm.request.requestType === 'test'">
<input type="checkbox"
name="continueCheckbox"
value="continueCheckbox">
Check this box to continue, and to confirm that you have read the Documentation
</div>

Have you tried using the ng-class directive?
<div id="continueCheckbox" ng-class="selected: vim.request.requestType === 'test'"></div>
Then handle the style in .css file
.selected {
display: none;
}

If you wanted to use jQuery, you could just check the value of the select. You have it set up already.
var selectType=$(this).val();
if (selectType=="test") // instead of if ($("#test").is(":selected"))
You could also use vanilla JS with .value to do your comparison.

How do you access a select pull down menu object with no ID or Class?

and then tell which selectedIndex was selected?!
here's the situation: the select object has no id or class. and the goal of the code is to make sure the user makes a selection before 'adding to cart'. further, this appears on many different product pages so the code needs to run not on the option value that was selected but rather on if the first option was selected or not. see below to clarify:
<select name="id[1]" id="attrib-1">//id cannot be used as it will be diff from page to page
<option value="20" selected="selected">Please Select</option>//can't be selected when put into cart
<option value="212" >Green</option>
<option value="208">Yellow</option>
<option value="210">Orange</option>
</select>
<input type="image" src="img/add.png" />//Add to cart button, has no id either.
this has to be triggered w/ an onclick of the 'add to cart' button. so my pseudo code would be:
$('input[type=image]').click(function(){
if(select option: is first option select) {
run some code} else (if anyother option other the first) {
run some diff code
}
thanks for the help. am spending way to much time on this, …uggg!

nevermind, i got it
$('input[type=image]').click(function(){
if ($("select > option:first").is(":selected")) {
//run some code
} else {
//run some diff code
}
})

Dynamic select option list resetting to first value

I've got a dynamically populated <select> list, where the first option is created by HTML and PHP when the page first loads, but when you drop down, javascript populates a list of additional options. However, when I select an option and remove focus, it is reset to the original selected option. I'm pretty sure that what I'm doing is not getting saved, but I'm not sure how to fix it.
Here's the HTML, which works fine:
<select name="select1" id="select1" onfocus= "checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select>
The checkSelect() function does a bunch of stuff, but then it ends as follows:
//do a bunch of stuff, ending in populating the 'legal' array.
document.input_form.select1.options.length=1;
//which I think is actually redundant
for (i=0; i < legal.length; i++)
{
document.input_form.select1.options[i+1]=new
Option(legal[i], legal[i], false, false);
}
Am I missing something necessary to make the option persist on the page?

The only reason I could think of such a behavior would be select1 wrapped into unclosed tag <label>, for example:
<label>label <!--may be missing </label> here -->
<select name="select1" id="select1" onfocus="checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select> <!--may be missing </label> here -->

Access Dropdown Box Value When changed via JQuery

Hey, can you help me figure this out? I need to hide/show a div based on a dropdown box (the dropdown box only has a name, no id). If the value of the dropdown box is 2, it needs to be shown and for anything else it needs to be hidden. Here is what I have so far, but it doesn't seem to work (I tried using similar code on a checkbox and it worked fine, so obviously i'm missing something). (It's not possible to modify the dropdown box's code)
JavaScript
$(document).ready(function() {
$('#addons').hide();
$("input[name='configoption[1]']").change(function() {
if($(this).val() != 2) {
$('#addons').hide();
} else
$('#addons').show();
} );
});
});
HTML
<select name="configoption[1]">
<option value="1" selected="selected">Test 1</option>
<option value="2">Test 2</option>
</select>
<div id="addons">
Hi
</div>

It seems you just simply specified the wrong element name, input should be select.
$("select[name='configoption[1]']")
make sure you are getting the element by doing this:
alert( $("select[name='configoption[1]']").length )
it should be anything other than 0.

Use an onchange option. Change
<select name="configoption[1]">
to
<select name="configoption[1]" onchange="javascript:function;">

jQuery show/hide multiple 'Other' input fields based on select drop down

I am using the follwoing jQuery to show/hide an 'Other' title field on page:
$('label[for=customerTitleOther], #customerTitleOther').hide();
$('.jTitle').change(function() {
if($(this).val() != 'Other') {
$('label[for=customerTitleOther], .jOther').hide();
}
else {
$('label[for=customerTitleOther], .jOther').show();
}
});
The field & associated label are hidden by default. However, the application i am building has scope for multiple entries on the same page so there may be multiple other fields like. Any ideas on how to extend the jQuery to cope with any number of 'Other' fields on page?

Well, it's not trivial, but what I've implemented is a "toggleOnSwitch" mechanism. Fragments of the page are annotated with the class name "toggleOnSwitch" and another class that tells what <option>, checkbox, or radio button determines visibility. The event handlers attached to the "toggler" elements (that is, the <options> or input fields) add or remove a particular class from the "toggled" elements, and (when switched "off" make sure that input fields are marked as "disabled" and a couple of other book-keeping tasks like that.
One trick is that when the "toggler" element is something like an <option> or a radio button input, when one element is toggled "off" the code has to check to see whether another element is toggled "on". That's because there's no event logged when one radio button loses the "checked" setting because another one has been clicked.
I've been thinking about posting my code for this, but it'd have to be cleaned up a little and stripped of one or two specialized hacks for my own application. Also, I'd want to make it use John Resig's "metadata" plugin instead of the cheesy version I did myself (before I knew "metadata.js" is available).

To answer my own question:
$(".jTitle").change(function(){
//set the select value
var val = $(this).val();
if(val != "Other") {
$(this).nextAll('.jOther').hide();
} else {
$(this).nextAll('.jOther').show();
}
})
With the HTML being:
<td>
<select id="titleDepend1" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="otherDepend1" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
</td>
So all the following elements with class jOther will be shown onChange.