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.
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
It is a project that's meant to be used on mobiles so there's no need to think how it would behave on desktop screens. In my project, I have an "a href" with an icon next to it that looks like a button. When an user clicks on it, then it opens "select option" dropdown menu. On mobiles, it would look like an radio button on Android or picker on iPhone by default. Sample image of select option on Android is below.
User makes a selection as they would on their phones, and after clicking it reverts back to original "a href" that looks like a button. However, "select option" should not be visible and only show after "a href" click in opened dropdown list form.
HTML:
<i class="icon">Icon</i> Button
<select id="button-dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
Jquery:
$('.button-select').trigger(function (e) {
e.preventDefault();
});
When you click on "a href," it opens "select option" dropdown menu that looks as you can see on a picture. And after clicking on any option, it goes back to "a href" as usual.
My Jquery skills are relatively weak and I am asking your help how to achieve that. Since it is "a href," I had used "e.preventDefault();" but I don't know how to go on.
You can try this: show select box on click of anchor href and hide it on change event of select box. See below code
$(document).ready(function(){
$('.button-select').on('click',function (e) {
e.preventDefault();
$('#button-dropdown').show();
});
$('#button-dropdown').on('change', function(){
$(this).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<i class="icon">Icon</i> Button
<select id="button-dropdown" style="display:none">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
I have two jquery plugin
Image Picker link and select2 link
when i use the both of this plugin one of them is cannot run
here is my code
jquery code
$(".select2").select2();
$(".imagepicker").imagepicker();
select menu for select2
<select class="select2">
<option value="1">One</option>
<option value="2">Two</option>
</select>
select menu for imagepicker
<select class="imagepicker">
<option data-img-src="img/01.png" value="1"> Page 1 </option>
<option data-img-src="img/02.png" value="2"> Page 2 </option>
<option data-img-src="img/03.png" value="3"> Page 3 </option>
</select>
I don't know what is happening, but when I use the both of this plugin one of them is not working, maybe because in same select tag?
I am sorry my english is bad
The thumb rule is that your last plugin loaded would overrun the previous segment.
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.
I'm sure this shouldn't be so hard!
I've been struggling with facebook's javascript: I need to redirect to a URL based on the value in a select drop down menu, something like:
<form name="cityselect">
<select name="menu" onChange="location=document.cityselect.menu.options[document.cityselect.menu.selectedIndex].value;" value="GO">
<option value="http://www.leeds.html">Leeds</option>
<option value="http://www.manchester.html">Manchester</option>
</select>
</form>
Can anybody help me get this working? I've had good look though the facebook dev forum and docs but either don't understand what needed or can't find the answer!
Try {} this.options also your urls are mistyped. http://www.leeds.html should be http://www.leeds.com , not sure if that is related but just wanted to point that out just in case.
<form name="cityselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>
Parent Frame:
<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>
how to remember selection after redirect.
for example
let us suppose there are many city name in drop down. when i select city name in drop down then relevant page should appear on website and selection of current city should remain on redirected page until selection not changed
all redirect on same domain with subdomain
all sub domain layout same
dropdown will be available on all pages of website.