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>
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
I have a json file exciting an array of images. I have fancy box install and when you click the image an inline div will appear. With in the inline div I display the image and in have a dropdown box to display options for selecting. I idea is to select an option then go to the corresponding page. I can get this to work with links but I want it to use a dropdown feature. No function will execute within the fancy box window.
function fruitselect() {
var e = document.getElementById("mySelect");
var strUser = e.options[e.selectedIndex].value;
alert(strUser);
};
<form>
Select your favorite fruit:
<select id="mySelect" onchange="fruitselect()">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
Is there a way to do this?
It is very hard to understand your comment and I do not see any issue with your code: http://codepen.io/anon/pen/pPpVxe?editors=1010
Also, you can disable "touch" feature if it is causing some trouble:
<a data-fancybox data-options='{"src": "#content", "touch": false}' href="javascript:;">
Open demo
</a>
I have a dropdown menu and I want to call a function, when the dropdown menu ITSELF is clicked. I mean the part where you click on the dropdown menu <select> and all the available <options> are displayed.
<select id="p1" title="Select a thing" class="selectpicker show-tick" data-live-search="true">
<option data-hidden="true"></option>
<option>Select A</option>
<option>Select B</option>
</select>
If I want to do something when Select A has been selected, I have the following.
$('#p1').change(function(event) {
console.log("You selected an option");
});
But how to trigger something if the dropdown menu itself is clicked? I would like to load the <option> with data when the dropdown menu itself is clicked.
The following is not working:
$("#p1").click(function(){
console.log("Loading <options>");
});
EDIT:
I found the problem. It is because I use a plugin called bootstrap-select https://silviomoreto.github.io/bootstrap-select/
If I remove class="selectpicker show-tick" data-live-search="true" it works!
But how do I get on click working with the bootstrap-select plugin?
Based on your updated code, you can get the click event via the following:
HTML:
<select id="p1" title="Select a procedure" class="selectpicker show-tick" data-live-search="true">
<option data-hidden="true"></option>
<option>Select A</option>
<option>Select B</option>
</select>
jQuery:
$('.bootstrap-select > button[data-id="p1"]').on('click', function (e) {
console.log('clicked select');
});
Because BootstrapSelect replaces the select with divs and buttons, you'll have to target the correct button as I show above. Note that the ID of your select has now moved into the 'data-id' attribute of the button.
See this new fiddle. Sorry that the styling is messed but the functionality works at least.
The normal on click did not work with the bootstrap-plugin. But they have some documentation regarding events: https://silviomoreto.github.io/bootstrap-select/options/#events
//on click
$('#p1').on('show.bs.select', function (e) {
console.log("hidden.bs.select means on click");
});
I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.
I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.
I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.
Html:
<select id="Title">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<optgroup label="Other">Other</optgroup>
</select>
<select id="FullTitle" style="display:none">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
<option value="DR">Doctor</option>
</select>
Javascript:
<script type="text/javascript">
$('select').find('optgroup').hover(
function () {
var parent = $(this).parent()
var selected = parent.find('option:selected').val()
var id = "#Full" + parent.attr('id')
parent.html($(id).html())
parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
})
</script>
This works fine in firefox but does not work in either IE or Chrome. I am not sure why.
I was wondering if anyone knows why this is not working or a better approach to my problem?
Hover events don't fire for options in IE and Chrome. There are some scripts you can try that might do this, and I've seen other posts on this site about it as well:
jquery hover event doesn't work with select option tag in google chrome?
From what I've seen, converting this into a div/ul and using css/jquery to make it look like a select list might by your best bet.
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.