Develop Reference

Append 'selected' to an option using JS (and possibly PHP)

I have a PHP page with:
<td class="short" id="inhouse-val<? echo $row['id'];?>"><? echo $row['inhouse'];?></td>
This table cell shows a user's selection of a drop down list called 'inhouse'. The options are 'Portland' and 'Remote'.
If a user clicks an Edit button, it fires a JS page with this:
document.getElementById("inhouse-val"+id).innerHTML="<input type='text' id='inhouse_text"+id+"' value='"+inhouse+"'>";
Obviously I will want to change <input type... to a Select list, however, the main thing I can't work out is how to have the JS file (or php) append 'selected' to the list option that is currently selected (inhouse) so that when this JS page stops executing and the returns to the PHP page, it shows the drop down list with the selected option as default.
For context, what happens is that the user is on the PHP page (which is an html table of rows from a database table) where a user can select a row and edit it. The JS file triggers and sets all the cells in the row to editable text fields. The user can then edit one, press Save and another PHP jumps in to overwrite those changes to the DB.
The problem I am having is that not all the table cells are text fields. 4 are selections from drop lists (like the example above).
My JS knowledge is weak but I can deal with PHP, so I am not sure how to script the example above so that it returns not a field with the current user text in it but rather it returns a drop list with the current user selection on it.
Here is the demo working page:
http://antistandard.com/projects/pathfinder/
Any help is greatly appreciated.
Thank you

<select>
<option selected="selected" value="first"/>
<option value="second"/>
</select>
I think this is what you're looking for.

Multi select jQuery-Dropdown plugin

I use this plugin.
http://dane.one/projects/jquery-dropdown/demo/#multi-select
https://github.com/daneWilliams/jquery.dropdown
I want use multiple select
$('select').dropdown({
multi: true
});
It's working normal, but initially, when the page was loaded if I have selected options
<select multiple>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
And I want add some selected options,
This plugin resets all selected, and I then seleced
And then chooses a new options without first selected.

I'm not sure if I understood you correctly, but, it looks like the option is selected, it just doesn't look selected?
Here's a CodePen with three examples: http://codepen.io/anon/pen/mWWWaO
The first one is an example of what you have, the option is selected by adding the selected attribute in the code. It is selected, and when you select other options, it stays, but it is not highlighted like the other ones.
The second example is just an example of what it is like with nothing selected, this was more for my own reference and testing.
The third one is a menu with no options set as selected, but instead, after the plugin is initialized it triggers a click event on the option you want selected.
A quick look at the plugin and it didn't look like there was a way to initialize it with options already selected and it also looks like there is no way to select an option programmatically through the plugin.
The plugin replaces the original menu with it's own code in order to create the menu and it looks like an option can't look selected unless it is clicked on, as opposed to the actual, hidden, menu being updated within the code.
I included the plugin JS in the CodePen, but not here. You can scroll to the bottom there to see the example JS code. You would probably want to set up a better way to mark those items as selected than the quick example I set up, but that's the general idea.
$('select').dropdown({
multi: true
});
// Select the third dropdown list and then find the second li in that list
$('.dropdown-list').eq(2).find('li').eq(1).trigger('click');

Use select2 instead. Its an awesome jQuery plugin both for longlist single value selects & multiple selects.

Making select box searchable html

I am dynamically adding select elements in the webpage when a certain action is taken by the user. The problem is that as the select elements are added dynamically, the jquery is unable to make them searchable as it is applied when the document is loaded. How can I make the dynamically added select boxes searchable?
EDIT
I'm using select bootstrap for making the select element searchable.
What I am doing is making the user select multiple parts of an image using select areas and whenever an area is selected, I add a select element corresponding to that area. This is done using a custom javascript in the head of the page. However, these select elements are devoid of any styling as the are added dynamically.
The select bootstrap can make a select element searchable by using data-live-search -
<select data-live-search="true" name="category_name" class="selectpicker" >

You can use a plugin like Chosen. It is very easy to use, just include the files and call it like this:
$(".my-select").chosen();
And if you want to add options dynamically, you can take a look at this answer, which explains how to do it.

You can search for the elements with a selector, even if you bind them dynamically:
$('option').each(function(){console.log($(this).html())});
$('select').append('<option class="option2">test 2</option>');
$('option').each(function(){console.log($(this).html())});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option class="option1">test</option>
</select>

How to load first drop down option on pageload

I want to have a dropdown that lists different bird species and I want each option to display a unique paragraph and image for that species. The below code is almost working for me, however on page load I would like the first option to be automatically selected.
How do I do this?
Is this the best way to go about this?
I am new to this and any help would be much appreciated. Thanks
https://jsfiddle.net/h0m0cpxk/
<html>
<body>
<select id="opts" selected="selected" onchange="document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')">
<option value="buzzard" extrainfo="The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic">Buzzard</option>
<option value="redkite" extrainfo="The red kite is a medium-large bird of prey in the family Accipitridae, which also includes many other diurnal raptors such as eagles, buzzards, and harriers">Red kite</option>
<option value="sparrowhawk" extrainfo="Habitat and food availability remain the main limiting and controlling factors of sparrowhawk numbers">Sparrow hawk</option>
</select>
<div id="ExtraInfo">extra</div>
</body>
</html>

One simple way is to add the the first option text to your ExtraInfo div by default. Since the first option in a select list is automatically selected when page is loaded, it will serve your purpose.
<div id="ExtraInfo">The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic</div>

The first option will automatically be selected. You might not need to trigger the change event here. You can just write the first paragraph into the <p> in HTML; it will be overwritten when you select a different option.
The other way to do it is to trigger the onchange event via Javascript on page load. This is a bit tricky without jQuery, see this question:
https://stackoverflow.com/a/2856602/5742681

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)

Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div

Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax