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
Related
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>
In a django form, I have set the default option for a select. It is not showing those changes in UI, but after inspecting I'm seeing that the DOM is actually being changed. When I check in the console for the HTML, I can see that the selected option is set to 1, but when I ask jquery for the selected option it gives me another.
$("select[name=spread_format] option")
[<option value="0">in.</option>, <option value="1" selected="selected">ft.</option>]
$("select[name=spread_format] option:selected")
[<option value="0">in.</option>]
$("select[name=spread_format]").val()
"0"
What I want to accomplish is to show 1 as default. This select is being rendered in a bootstrap modal.
Strange to notice that the selected option in UI is '0', not '1' as indicated my DOM.
In order to get the value of the selected option you should use val(), and not searching for the <option> element.
$('#btn1').click(function() {
console.log($('#s1').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
<option value="1">A</option>
<option value="2" selected="selected">B</option>
<option value="3">C</option>
</select>
<br />
<button id="btn1">click</button>
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>
I want to learn how to use JavaScript (or the jQuery library) in order to go to a url indicated as a value of the option tag inside an optgroup tag.
With a simple, one-level select tag containing option tags, the solution can be similar to that described in this post:
<FORM NAME="nav"><DIV>
<SELECT NAME="SelectURL" onChange=
"document.location.href=
document.nav.SelectURL.options[document.nav.SelectURL.selectedIndex].value">
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html"
SELECTED>Please select an item:
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/">
Main page on HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html">
Choices in HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html">
Tables and forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html">
Form submission methods (GET and POST)
</SELECT><DIV>
</FORM>
I tried to use it with a two-level select tag with option tags inside optgroup tags – and it's not working for me. I'd appreciate help with adapting this code.
Use this to do it when the user selects an option:
$('select[name="SelectURL"]').change(function() {
window.location.replace($(this).val());
});
Or this when the user clicks a submit button:
$('form[name="nag"]').on('submit' function(e){
e.preventDefault();
window.location.replace($('select[name="SelectURL"]').val());
});
You should also clean up you HTML like this:
<FORM NAME="nav">
<DIV>
<SELECT NAME="SelectURL">
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html" SELECTED>Please select an item:</OPTION>
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/"> Main page on HTML forms</OPTION>
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html"> Choices in HTML forms</OPTION>
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html"> Tables and forms</OPTION>
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html"> Form submission methods (GET and POST)</OPTION>
</SELECT>
<DIV>
</FORM>
First of all get rid of the inline onChange event handler:
<FORM NAME="nav"><DIV>
<SELECT NAME="SelectURL">
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html"
SELECTED>Please select an item:
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/">
Main page on HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html">
Choices in HTML forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html">
Tables and forms
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html">
Form submission methods (GET and POST)
</SELECT><DIV>
</FORM>
Then just add an event listener:
$(document).ready(function()
{
$('select[name=SelectURL]').change(function(v)
{
window.location.replace( $(this).val() );
});
});
So I have this code:
<select onchange="location.href=this.options[this.selectedIndex].value;" name="fancySelect" class="makeMeFancy">
<option value="0" selected="selected" data-skip="1">Choose Your Product</option>
<option value="img/picsamp.jpg" data-icon="img/products/iphone.png" data-html-text="iPhone 4<i>in stock</i>">iPhone 4</option>
<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod <i>in stock</i>">iPod</option>
<option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air<i>out of stock</i>">MacBook Air</option>
<option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station<i>in stock</i>">iMac Station</option>
</select>
With it, I can click on an element and go to the link stored in the "value" attribute. My question is, ¿Can I add a "rel" attribute to that link generated with the onchange? I need to use a rel attribute, not a data-* one.
Edit:
I also need to add ?iframe=true&width=400&height=200 to my links as the lightbox is going to display iframes...
If you're wanting open a modal window, then most libraries allow you to programmatically open windows. So, you could write a code block that listens for the select list to change and then manually open a modal window, with the content coming from the URL you have stored in the currently selected option.