This question already has answers here:
What is the best way to make jump menu (HTML select dropdown)?
(2 answers)
Closed 7 years ago.
I have problem to insert a jump link into this option value:
<select name="countries" id="countries" style="width:300px;">
<option value='ad' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
Do you want to open a link when clicking on the option? Then this should do the job:
<html>
<body>
<select name="countries" id="countries" style="width:300px;">
<option value='ad' data-image="images/msdropdown/icons/blank.gif" onclick="location='http://www.example.com';" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
</select>
</body>
</html>
Here is another solution to opening a link when clicking the option:
I placed the dropdown bar inside of a form tag. JSFiddle: http://jsfiddle.net/cgmef9y4/
Code:
<form>
<select name="URL" id="countries" style="width:300px;" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="#">Choose your country</option>
<option value="andorra.html">Andorra</option>
</select>
</form>
When you click the dropdown and choose "Andorra", the page will open the link andorra.html (which obviously leads to a 404 -- as there is no andorra.html page on jsfiddle.net).
Related
I happened to notice that my multiple select dropdowns are getting reset when I call the window.print() function on the click of a button to print the current page.
This seems to have been working on Chrome v80 but it seems the issue is part of v81.
I am using a workaround for this by displaying values in an input box (rather than the multiple select tag) on the print button click. I was wondering if there is a better solution to the issue.
A sample code is given below: Selected option values are retained in Chrome v80 but not on v81 when the print button is clicked.
<html>
<head>
<script>
function printPage(){
window.print();
}
</script>
</head>
<body>
<select id="test" name="test" multiple>
<option value="1">My val 1</option>
<option value="2" selected>My val 2</option>
<option value="3">My val 3</option>
<option value="4" selected>My val 4</option>
<option value="5">My val 5</option>
</select>
<input type="button" value="print" onclick="printPage()"/>
</body>
</html>
Is your issue that the elements do not appear selected in the printout, or that after pressing print, the page forgets what was selected and the user must select them again? If it is just about appearing in the printout, it is possible you have "background graphics" unchecked in the "more options" section of the print dialog
This question already has answers here:
Changing the background colour of an active input selector
(2 answers)
Closed 4 years ago.
I am creating a contact form and want to make it more barrier friendly by highlighting the background of a selected item while tabbing through them with keyboard.
Here is a fiddle to help explain.
When clicking in the first box and then hitting tab, the dropdown menu is selected and should change its background-color to indicate its selection.
(Note: not affecting the dropdown options)
How do I change the correct part of the element when its selected via tabulator?
<html>
<body>
<div class="textarea1">
<textarea rows="1" cols="20">
</textarea>
</div>
<div class="dropdown">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="textarea2">
<textarea rows="1" cols="20">
</textarea>
</div>
</body>
</html>
I have edited the jsfiddle link
https://jsfiddle.net/srg8o0v4/
You just need to add :focus selector for all your form elements as above in textarea and select.
textarea:focus, select:focus { background-color: yellow; }
This question already has answers here:
Changing the selected option of an HTML Select element
(14 answers)
Closed 7 years ago.
<select name="cat1" class="form-control input-lg">
<option value="">All Businesses</option>
<option value="78">Deals</option>
<option value="46">Delivery</option>
<option value="45">Dispensary</option>
<option value="47">Doctor</option>
</select>
I know you could simply add the selected="selected" to the whatever option to make it default in the drop down. Currently the "All Businesses" option is the default one showing. I want the Dispensary option to show as default
<select name="cat1" class="form-control input-lg">
<option value="">All Businesses</option>
<option selected="selected" value="45">Dispensary</option>
<option value="46">Delivery</option>
<option value="47">Doctor</option>
<option value="78">Deals</option>
</select>
so basically I want that achieved but I am unable to edit the HTML code. Is there a way I can achieve it without touching the HTML?
$('select[name="cat1"] > option[value="45"]').attr('selected','selected');
This jQuery code will select that option element and add that attribute to it.
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.
Here is the dropdown I'm using:
<form name="my_form_name">
<select name="my_ddmenu_name">
<option value="#" selected>dd menu title (should not act as a link)</option>
<option value="link to page 1">1st Link name</option>
<option value="link to page 2">2nd Link name</option>
<option value="link to page 3">3rd Link name</option>
<option value="link to page 4">4th Link name</option>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu1.value,'newtab')">
</select>
</form>
It's necessary for me to
- have a "Go" link, as above. Users should select their link of choice and then press "Go!" to visit the selected link.
- open links in a new tab, as above.
So, how should I change the code above to deactivate the 1st (selected) option's link (currently leading to "#").
Thank you.
How about:
onClick="if(ddmenu1.value !== '#')window.open(ddmenu1.value,'newtab')"
Demo.
Try
<option value="#" selected disabled>dd menu title (should not act as a link)</option>
Your Go button must trigger a custom javascript that checks the value of your dropdown and then does the fancy link work.
JQuery would be my preference.