We Keep Coding

Loading HTML files with dropdowns using jQuery

I am using jQuery .load to load different HTML files into my webpage using a dropdown menu. Each dropdown selection calls the corresponding file. My target div is <div id="targetPane"></div> to load the file. That works fine. I am looking to clean up the code so I dont have to write $('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );}); 50 or so times.
The naming convention is that the #f1 will call inc_1.html, #f2 will call inc_2.html and so on. Maybe a solution using a for loop or ('option:selected',this) ? Thanks
$(document).ready(function () {
$('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );});
$('#f2').click(function(){$('#targetPane').load( 'includes/inc_2.html' );});
..
..
..
$('#f50').click(function(){$('#targetPane').load( 'includes/inc_50.html' );});
});
HTML
<form name="courseCalc">
<select name="myCourses"
OnChange="location.href=courseCalc.myCourses.options[selectedIndex].value">
<option selected>Please Select...</option>
<option id="f1" value="#">Item 1</option>
...
<option id="f50" value="#">Item 1</option>
</select>
</form>

Firstly, note that when working with select elements you are best off using the change event of the parent select element instead of listening for click on the option. It's better practice, more widely supported in various browsers, and follows accessibility guidelines.
With regard to your question, the technique you're looking for is called 'Don't Repeat Yourself', or DRY for short. To achieve it in this case you can hook the change event handler and use get a reference to the select from the Event object passed to the handler. You can amend the HTML to store the URL in the value attribute and then provide it as the argument to load(), like this:
<form name="courseCalc">
<select name="myCourses" id="courses">
<option selected>Please Select...
<option value="includes/inc_1.html">Item 1</option>
<option value="includes/inc_2.html">Item 2</option>
<!-- ... -->
<option value="includes/inc_50.html">Item 50</option>
</select>
</form>
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
});
});
Note that I added an id to the select element to make it easier to retrieve the element in the example, but any selector would work.

Get value on select only when clicked

I have a select input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you

You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});

Change event not firing alert

I have a select with an ID of vat and I try to do something when the select is changed, but it is not working. I tried several solutions mentioned here at SO, but the alert is not showing. So any idea what is going wrong? Here is my code:
var ready;
ready = function() {
$('#vat').change(function(){
alert("hello");
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
Other action in the same js file do work, e.g.
$('#rate').blur(function() {
recalculateAmounts();
});
This is the HTML:
<select id="vat" name="vat">
<option value=""></option>
<option value="2">6%</option>
<option value="3">19%</option>
<option selected="selected" value="1">21%</option>
</select>

Your HTML must be having some problem otherwise it will always work fine. See this -
http://jsfiddle.net/5X2VY/
Same code as yours

Showing alert dialog on dropdown select in jQuery

I'm trying to show an alert dialog on dropdown select in jQuery but it doesn't seem to be working. What am I doing wrong? My code is here: http://jsfiddle.net/AyCFt/6/
HTML
<select>
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager">Project Manager</option>
<option id="#projectmanager2">Project Manager 2</option>
</select>​
JS
$(document).ready(function() {
$("#projectmanager").click(function(){
alert("Hello");
});
$("#projectmanager 2").click(function(){
alert("Hello to you too!");
});
});
​

This way you can show a unique alert box for each projectmanager.
<select id='ddselect'>
<option selected="selected" >Please select your Login</option>
<option>--------------------------</option>
<option id="projectmanager">Project Manager</option>
<option id="projectmanager2">Project Manager 2</option>
</select>
$(document).ready(function() {
$("#ddselect").change(function(){
if($("#ddselect option:selected").attr("id") == "projectmanager"){
alert("Project manager 1 alert");
}
if($("#ddselect option:selected").attr("id") == "projectmanager2"){
alert("Project manager 2 alert");
}
});
});

An elegant and also flexible way of doing this: http://jsfiddle.net/AyCFt/13/
The jsFiddle just tackles the question asked (displaying the alerts). The code below shows that the code is much more flexible, but avoids the if/switch statements of other answers if they are not needed.
HTML: I added an id in the select element and custom attributesnamed data-alert containing the message for each option that needs to display an alert upon being selected. These attributes are valid in HTML5 and forward, but they work fine in earlier HTML versions also:
<select id="selectAlert">
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager" data-alert="Hello">Project Manager</option>
<option id="#projectmanager2" data-alert="Hello to you too">Project Manager 2</option>ello
</select>
Javascript (version 1): If you just want the alerts and are a fan of brevity and clean code:
$(function() {
$("#selectAlert").change(function(){
var alertMsg = $(this).find(":selected").attr("data-alert");
if(alertMsg) alert(alertMsg);
});
});
Note that this solution does not force you display the text or the value of options. You are free to choose any alert message exactly as you wanted.
WHY DO THINGS THIS WAY? This kind of solution decouples logic from data. So if you are producing the select using server-side code (either as part of a dynamically generated page or through AJAX) you ideally do not want to have to produce your Javascript in the same way if you can avoid it. Whereas your code and the code in some other solutions puts the alert messages in the Javascript code, this solution puts them inside each option, in the HTML.
Javascript (version 2): If there are more things you need to do:
$(document).ready(function() {
$("#selectAlert").change(function(){
var $selected = $(this).find(":selected"); //faster than $("#selectAlert :selected") as it only searches among the options in the select and not the whole DOM like another answer's solution
//some code: you can do what you want with $selected here get it's value, its id, etc etc
var alertMsg = $selected.attr("data-alert")
if(alertMsg) alert(alertMsg);
//some more code here
});
});
PROBLEM WITH CODE POSTED IN THE QUESTION:
The problem with the code you posted was that you were using click on the options of the select element. As you discovered this event is not defined for the individual options.
A GENERAL POINT ABOUT UI EVENTS: In general, it is best to try to work with device-independent, more "semantic" events wherever possibly. In this case the event we are using is one that tells us that the value of the select has changed. It does not matter if the user did so using the mouse, the keyboard, or touch!!!

Try with the following code. It will work for you.
<select id='ddselect'>
<option selected="selected" >Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager">Project Manager</option>
<option id="#projectmanager2">Project Manager 2</option>
</select>
$(document).ready(function() {
$("#ddselect").change(function(){
alert("Hello");
});
});

Make the below change to html:
<select id="SelectOptions">
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager">Project Manager</option>
<option id="#projectmanager2">Project Manager 2</option>
</select>​​​​​​​​​​
Make the below change to the javascript:
$(document).ready(function() {
$("#SelectOptions").change(function(){
alert($("#SelectOptions option:selected")[0].text);
});
});
This will display the selected option.

As stated above you can use onchange on the select element. to respond uniquely to each value you can use a switch statement like so:
http://jsfiddle.net/AyCFt/11/

This is but one way to do it (and depending on your final implementation, there's probably a better way to go about this).
Add value attributes to your markup so that the message is contained in the value:
<select id="changeMe">
<option selected="selected">Please select your Login</option>
<option disabled="disabled">--------------------------</option>
<option id="projectmanager" value="Hello">Project Manager</option>
<option id="projectmanager2" value="Hello to you too">Project Manager 2</option>
</select>​
Since option elements don't [often] receive .click() events, it's much better to add a .change() handler to the select element and go from there:
$(document).ready(function() {
$('select#changeMe').change(function(e) {
var self = $(this), //cache lookup
selected = self.children('option:selected'), //get the selected option
i = selected.index('select#changeMe option'), //grab the index, relative to all options
message = selected.val(); //get the message
if (i > 1) { //ignore "Please select" and "---"
alert(message);
}
});
});​
Updated fiddle: http://jsfiddle.net/AyCFt/12/

To customise the alert message, you would either need to run a 'switch' statement (or a switch-like series of 'if' statements) in the Javascript code, or encode the alert message into the HTML and access that (example here http://jsfiddle.net/AFguq/):
<select id="SelectOptions">
<option selected="selected">Please select your Login</option>
<option>--------------------------</option>
<option id="#projectmanager" alertText="Hello">Project Manager</option>
<option id="#projectmanager2" alertText="Hello to you too">Project Manager 2</option>
</select>​
(javascript:)
$(document).ready(function() {
$("#SelectOptions").change(function(){
alert($("#SelectOptions option:selected").attr('alertText'));
});
});​

Make <select> options "click" automatically

Let's say I've got a drop down like this:
<div class="selector">
<select name="perPage">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
</div>
I'm know PHP and Javascript (jQuery) so a solution in either would be just fine. But I've got a submit button underneath it, and instead of that, I was wondering if there's a way to click the drop down, pick your value, then have it send that automatically with OUT having to hit a submit?

You could use the 'onchange' element of the select:
<select name="dropdown" id="dropdown" onchange="this.form.submit()">
This only uses javascript without the need of loading the whole JQuery library - unless you use JQuery for other functions on the site.

You can listen to the change event using jQuery and submit the parent form automatically. Something like this:
$('.selector select[name=perPage]').on('change', function(e) {
$(e.currentTarget).closest('form').submit();
});

Assign an id to to select, e.g. selectID, then add jQuery of the form:
$('#selectID').change(function(){
this.form.submit()
});

$('select[name="perPage"]').on('change', submitForm);
where submitForm is a function that submits the form.