Я хочу иметь список опций, содержащих разные URL-адреса, а затем перенаправить пользователя на основе выбранной им опции, как только он нажмет кнопку «Отправить».
Это работает, но работает слишком быстро, так как пользователю не нужно нажимать кнопку отправки.
<select id = "dynamic_select">
<option value = "" selected>Pick a Website</option>
<option value = "http://www.google.com">Google</option>
<option value = "http://www.youtube.com">YouTube</option>
<option value = "https://www.netflix.com">Netflix</option>
</select>
<script>
$(function(){
// bind change event to select
$('#dynamic_select').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
Как я могу реализовать кнопку отправки для этого кода, чтобы пользователь не перенаправлялся сразу?
🤔 А знаете ли вы, что...
JavaScript имеет множество встроенных объектов, таких как Array, Date и Math.
Для этого, просто добавив кнопку submit (через ввод), вы можете просто обработать submit щелчок, а затем получить значение элемента select. Таким образом, он будет срабатывать только при нажатии submit, а не при каждом изменении select.
<select id = "dynamic_select">
<option value = "" selected>Pick a Website</option>
<option value = "http://www.google.com">Google</option>
<option value = "http://www.youtube.com">YouTube</option>
<option value = "https://www.netflix.com">Netflix</option>
</select>
<input type = "submit" id = "send_url" value = "Submit" />
<script>
$(function(){
// bind change event to select
$('#send_url').on('click', function () {
var url = $('#dynamic_select').val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
Добавьте кнопку отправки и поместите свой код при ее нажатии (примечание: перед перенаправлением вы должны проверить, выбран ли URL-адрес):
<select id = "dynamic_select">
<option value = "" selected>Pick a Website</option>
<option value = "http://www.google.com">Google</option>
<option value = "http://www.youtube.com">YouTube</option>
<option value = "https://www.netflix.com">Netflix</option>
</select>
<input type = "submit" id = "submit" value = "submit" />
<script>
$(function(){
// bind change event to select
$('#submit').on('click', function () {
var url = $('#dynamic_select').val(); // get selected value
if (url! = "") { // require a URL
window.location = url; // redirect
}
else
alert('Please select a Website!');
return false;
});
});
</script>