Develop Reference

Having both text AND href links inside a select / combo-box

I have read Links in dropdown options and using href links inside tag and several other questions in SO, however my question is a bit different.
I would like to have BOTH text AND href inside a select combo-box.
Something like
<select id="mySelect">
<option value="-1" selected>choose an option to test</option>
<option value="1">Book 1 open site</option>
<option value="2">Book 2 open site</option>
</select>
The idea is that the user can select from a combo-box, but also can go to an external site by clicking open site to view the Books before selecting them.
ie: clicking on the left-side of the <option> is a regular select, while clicking on the right-side of the <option> will send the user to another page
Is that possible? Running the code either ignores completely the href or complains Warning: validateDOMNesting(...): <a> cannot appear as a child of <option>.

Is that possible?
Not using using <a> element as child element of <option> element; <a> element is not a valid child node of HTML <option> element.
Permitted content Text, possibly with escaped characters (like é).
You can set the URL at the element data-* attribute and navigate to the URL at change event of <select> element
document.getElementById("mySelect")
.onchange = function() {
var url = this.selectedOptions[0].dataset.href;
if (url && confirm("Navigate to " + url + "?")) {
location.href = url;
}
}
:target {
color: blue;
}
<select id="mySelect">
<option value="-1" selected>choose an option to test</option>
<option value="1" data-href="#Book1">Book 1 </option>
<option value="2" data-href="#Book2">Book 2 </option>
</select>
<div id="Book1">Book 1</div>
<div id="Book2">Book 2</div>

You can use Fit.UI's Drop down control for that. The display value may contain HTML elements such as a link.
http://fitui.org/Control-DropDown.html

How do I create a link to pre-select a form option

I have the following code on another webpage on my site with a form (say on page index.html): JSFiddle
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm()">
i.e a dropdown form.
I want to have a link on another webpage that will go to this page, and have the "Sales" option already selected.
<option value="1">
Sales
</option>
from the drop down menu (instead of the current default option), how do I create this?

Query parameters can be used to achieve the result you want, but you will need to parse the query parameter manually on your current page, since there is no standard JavaScript method for doing it.
You can write the following code on your page to automatically select the option:
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#dropdown").val(option);
});
Now you can create an anchor with the URL of this page, e.g. http://yourpage.url?type=1, which will redirect to this page, and will automatically change the value of your dropdown accordingly.

You must add some kind of router functionality with Javascript in your site.
I think the simplest thing you could do it to have a script in that page that checks the url if it has say a #bar hash like so: http://yoursite.com/foo.html#bar.
<script>
// make sure you run this on DOM ready like in $.ready() in jQuery or in a script just before closing the body tag
if(window.location.hash === 'bar') {
// add the selected attribute to the <option> you want
}
</script>

Try with append() function of jquery .and pass this with in onchange function call .And also added with document.ready for create the link on document load with selected value
function showForm(that){
var s = $(that).children('option:selected').text()
$('#link_box').append(''+s+'</br>')
}
$(document).ready(function(){ // for window load
showForm($('select'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
<label class="control-label" for="dropdown">
What can we help you with?
</label>
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm(this)">
<option value="0" disabled>
Select an option
</option>
<option value="1" selected>
Sales
</option>
<option value="2">
Complaints
</option>
<option value="3">
Queries
</option>
<option value="4">
Ideas
</option>
</select>
</div>
<div id="link_box">
<!-- its a link append box-->
</div>

HTML make <option> invalid

I have the following piece of code in a contact form for a site I am designing:
<select id="Category" name="Category">
<option value="0" selected="selected" disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>
I would like set the menu such that the user cannot leave category as the selected option. Is there any way to do this with HTML? If not, how would I do it with JavaScript?
Thank you

According to the HTML5 spec,
Constraint validation: If the element has its required attribute specified, and either none of the option elements in
the select element's list of options have their
selectedness set to true, or the only option element in
the select element's list of options with its
selectedness set to true is the placeholder label option,
then the element is suffering from being missing.
If a select element has a required attribute
specified, does not have a multiple attribute specified, and
has a display size of 1; and if the value of the first
option element in the select element's list of
options (if any) is the empty string, and that option
element's parent node is the select element (and not an
optgroup element), then that option is the select
element's placeholder label option.
Therefore, you can use
<select id="Category" name="Category" required>
<option value="" selected disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>

When the user click on any option, he can´t return the first one back. But he can submit form without change, then you need to validate via JS.
It's quite simple,
function validate() {
var select = document.getElementById('Category');
return !select.value == 0;
}
And the form in HTML:
<form onsubmit="return validate()">...</form>

Will disabling select work for you?
<select id="Category" name="Category" disabled>
<option value="0" selected="selected">Category</option>
...
</select>
Or maybe disabling all but selected option will work for you (as shown here: https://stackoverflow.com/a/23428851/882073)

Ideally, you would simply remove the selected attribute from disabled options on the server side when generating the HTML document to begin with.
Otherwise, if you are using JQuery, this can be done fairly easily with:
$('#Category').find('option:not([disabled])').first().prop('selected', true);
Add this to your ondomready event handler. This will force the first non-disabled option to be selected for this select element regardless of its options' selected attributes. The disadvantage of this method is that it will prevent the selected attribute from being able to be used at all with this select element.
On the other hand, if you are trying to create category headers within a select element, you should consider using an optgroup element instead, since that is the correct semantic markup for this:
<select id="Category" name="Category">
<optgroup label="Category">
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</optgroup>
</select>

Detecting when the user chooses an option from a dropdown

I have a classic HTML select box:
Show:
<select name="show" id="showThreads">
<option value="all" selected="selected">All</option>
<option value="new">Only unread</option>
</select>
Now, I need JavaScript to make an Ajax request when the user changes the selection in the box (without jQuery).
I have tried:
Listening for clicks on the <option> tags, but it won't work for users using a keyboard or a touch device
on an interval, looping though the <option> tags and checking if the selected one changes, but it seemed to trigger even when I simply hovered over the second option.
Is there a way of doing this that will work on all browsers/devices?
Thanks!

Try the "change" event.
document.getElementById("showThreads").onchange = function() {
};

Listen for onChange on the <select> tag.

function yourAjaxCall(something) {
}
<select name="choice1" size="1" onchange="yourAjaxCall(this);">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>

javascript onclick="location.replace('url')" not working

i'm writing some inline javascript. it's not working and i'm not sure why.
at the top of the index page
<meta http-equiv="Content-Script-Type" content="text/javascript" />
later on i have:
<select name='id'>
<option value=-1>New Entry</option>
<option value='1' onclick="location.replace('index.php?page=update&id=1')">2010-06-12 16:38:08</option>
<option value='2' onclick="location.replace('index.php?page=update&id=2')">2010-06-12 18:20:49</option>
<option value='3' onclick="location.replace('index.php?page=update&id=3')">2010-06-13 11:39:09</option>
</select>
what i want is for the page to be replaced when one of the option items is selected but the code is not causing a page refresh and i'm not sure why. is something wrong with the javascript?

Use the onchange event of the select element:
<select name="id" onchange="window.location.replace('index.php?page=update&id='+this.options[this.selectedIndex].value);">
<option value="-1">New Entry</option>
<option value="1">2010-06-12 16:38:08</option>
<option value="2">2010-06-12 18:20:49</option>
<option value="3">2010-06-13 11:39:09</option>
</select>
Note: The location.replace method is used when you want to navigate to the page and also replace the current page in the browsing history. If you just want to navigate to the page normally, you assign the URL to the window.location.href property instead.

I've found that window.location.href doesn't work at all in newer browsers (FF4, Chrome 10, etc.).