Перенаправление на опцию выбора в поле выбора

Question

На данный момент я использую это:

<select ONCHANGE="location = this.options[this.selectedIndex].value;">

он перенаправляет меня на место внутри значения параметра. Но это не работает должным образом ... означает, что если я нажму на первую опцию выбора, то действие onChange не будет запущено. Я думал о javascript, но я думаю, что у вас будут лучшие предложения, ребята. Итак, как я могу заставить его работать, если я нажму на каждую опцию, она перенаправит меня на ее значение?

Answer 1

Поскольку первая опция уже выбрана, событие изменения никогда не запускается. Добавьте пустое значение в качестве первого и проверьте наличие пустого в назначении местоположения.

Вот пример:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

А вот и скрипка: http://jsfiddle.net/bL5sq/

Answer 2

Я бы настоятельно рекомендовал перейти от встроенного JavaScript к следующему:

function redirect(goto){
    var conf = confirm("Are you sure you want to go elswhere?");
    if (conf && goto != '') {
        window.location = goto;
    }
}

var selectEl = document.getElementById('redirectSelect');

selectEl.onchange = function(){
    var goto = this.value;
    redirect(goto);

};

JS Fiddle demo (404 жертва linkrot) .
Демонстрация JS Fiddle через Wayback Machine .
Forked JS Fiddle для текущих пользователей .

В разметке в JS Fiddle первая опция не имеет назначенного значения, поэтому нажатие на нее не должно приводить к тому, что функция что-либо делает, и, поскольку это значение по умолчанию, щелкните select, а затем выберите первое значение по умолчанию. option не вызовет событие change в любом случае.

Обновление:
В последних примерах (2017-08-09) URL-адреса перенаправления требуют замены из-за ошибок, связанных со смешанным содержимым между JS Fiddle и обоими доменами, а также обоими доменами, требующими «Sameorigin» для содержимого в рамке. - Альберт

Answer 3

, чтобы сделать ее глобальной функцией повторного использования с помощью jquery

HTML

<select class="select_location">
   <option value="http://localhost.com/app/page1.html">Page 1</option>
   <option value="http://localhost.com/app/page2.html">Page 2</option>
   <option value="http://localhost.com/app/page3.html">Page 3</option>
</select>

Javascript с использованием jquery

$('.select_location').on('change', function(){
   window.location = $(this).val();
});

Теперь вы сможете повторно использовать эту функцию, добавив.select_location class для любого класса элемента Select

Answer 4

Для тех, кто не хочет использовать встроенный JS.

<select data-select-name>
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        document.querySelector('select[data-select-name]').onchange=changeEventHandler;
    },false);

    function changeEventHandler(event) {
        window.location.href = this.options[this.selectedIndex].value;
    }
</script>

Answer 5

    {{-- dynamic select/dropdown --}}
    <select class="form-control m-bot15" name="district_id" 
        onchange ="location = this.options[this.selectedIndex].value;"
        >
          <option value="">--Select--</option>
          <option value="?">All</option>

            @foreach($location as $district)
                <option  value="?district_id={{ $district->district_id }}" >
                  {{ $district->district }}
                </option> 
            @endforeach   

    </select>

Answer 6

Это можно заархивировать, добавив код в событие onchange элемента управления select.

Например:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value=""></option>
    <option value="http://google.com">Google</option>
    <option value="http://gmail.com">Gmail</option>
    <option value="http://youtube.com">Youtube</option>
</select>