Загрузка страницы по выбору из раскрывающегося списка
Я пытаюсь создать раскрывающееся меню, которое приведет меня к различным веб-страницам. Сейчас он настроен таким образом, что вы делаете свой выбор, а затем вы нажимаете кнопку "Перейти", а затем переходите к соответствующей ссылке. Я пытаюсь понять, как это сделать, когда вы делаете свой выбор автоматически, и вам не нужно нажимать кнопку "Перейти".
Вот что у меня есть:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Любая помощь или ссылки на объяснения были бы замечательными. Спасибо!
Ответы
Ответ 1
Попробуйте следующее:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
То, что вы искали, было "onchange" вместо "onsubmit"
Ответ 2
Отъезд jQuery.change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Ответ 3
Что-то вроде этого может помочь - в основном вы просто привязываете событие onChange к выбору, чтобы при выборе новой опции он пересылал местоположение на страницу.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
Ответ 4
Я бы порекомендовал вам начать использовать фреймворк javacript jQuery, поскольку он действительно сделает вашу жизнь намного проще, когда дело доходит до javascript.
Когда у вас установлена и настроена jQuery на вашей веб-странице, вы должны сделать что-то вроде этого:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Ответ 5
Очевидно, очень поздно, чтобы вечеринка здесь, но так как я пытался выяснить то же самое и смог, я опубликую, как здесь.
В других ответах вы загружаете ссылку, когда вы меняете опцию выбранного элемента, но вы изначально попросили сделать это с помощью кнопки после выбора. Это сработало для меня:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>