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>
Related
I created a list of options using html and placed a button beneath it...I want the user to select an option and when he clicks on the button,it redirects him to a different page...
Is there anyway that I can do this using JavaScript please?
Yes, window.location.href = "/someLocation" just is made for you.
when you click in the button you can call a function and inside of this function you put
window.location.href = "your-url"
or you can use window.open("your-url") to open a new tab.
<select onChange="goToPage(value)">
<option disabled selected value> -- select an option -- </option>
<option value="https://google.com" > google </option>
<option value="https://stackoverflow.com" > stackOverflw </option>
<option value="https://github.com" > git </option>
</select>
<script>
function goToPage(value) {
window.location.href = value
}
</script>
you an see more in this
link here
I have created a website with javascript dropdown option menu.
This is my menu.php file
<select onchange="if (this.value) window.location.href=this.value">
<option value="/home.php">Home</option>
<option value="/aboutme.php">About Me</option>
<option value="/work.php">Work</option>
<option value="/contect.php">Contect Me</option>
</select>
I have included this file on every pages of website.
It works fine.
Now what I want is : When I click on the aboutMe from dropdown menu in "home" It should redirect me to About Me page and dropdown menu in aboutme page should remain at about me. So far it is redirecting successfully, but dropdown menu always remains on "Home".
Is there a way to solve this ? or Should I create a saparate file for each pages?
I am confused. Please Help.
Give your select an id:
<select id="page" onchange="if (this.value) window.location.href=this.value">
and use the script:
<script>
window.onload = function(){
document.getElementById('page').value = window.location.href;
}
</script>
In the below code ,i want to click on Baseball game option, but i am unable to click on it
HTML CODE
<option value="" disabled="" selected="">-- Choose Option --</option>
<option value="12">Baseball Game</option>
<option value="1417">Practice</option>
</select>
</div>
Please help me
Hi this is just the HTML Code, you haven't provide your Java Snippet.
Below is an example of how to go about selecting your options
1)
driver.findyElementBy(By.Xpath("//option[#value='Baseball Game']")).click();
2)
WebElement selectElement = driver.findElementBy(By.tagName("select"));
Select selectOption = new Select(selectElement);
selectOption.selectByValue("Baseball Game");
I have written my first jquery mobile site using their multipage template.
In my application, Changes in the main page can affect the selected value in a drop down in a sub page. The first time I go to the sub page, the correct option is selected and displayed. After that, when I go to the sub page, the correct option is selected (ticked), but the wrong option is displayed.
I created a jsfiddle to demonstrate this... http://jsfiddle.net/afePj/2/
page one lets you select an option...
<select name="selectname1" id="selectid1" onChange="changePageTwo()">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
...and sets the selected value on page two to match...
function changePageTwo() {
select1 = document.getElementById('selectid1');
select2 = document.getElementById('selectid2');
select2.selectedIndex = select1.selectedIndex;
}
...when you arrive on page two I would like the selected value to be displayed. But after the page has been displayed once, the option it shows never changes...
<select name="selectname2" id="selectid2">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
Any ideas about how I can make the sub page display the selected value?
Thanks
When you update a select menu in jQuery Mobile you need to call the select menu widget's refresh menu so that the display is updated to match the native elements
For example
$('selectid2').selectmenu('refresh');
http://jsfiddle.net/afePj/4/
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.