web-dev-qa-db-ja.com

選択ボックスの選択オプションにリダイレクト

現時点では私はこれを使用しています：

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

オプション値内の場所にリダイレクトされます。しかし、期待どおりに動作しません..選択の最初のオプションをクリックすると、onChangeアクションが実行されないことを意味します。私はjavascriptについて考えていましたが、もっと良い提案ができると思います。各オプションをクリックして、その値にリダイレクトされる場合、どのように機能させることができますか？

htmlactiononchange
32
Lucas

最初のオプションはすでに選択されているため、変更イベントは発生しません。最初の値として空の値を追加し、場所の割り当てで空を確認します。

次に例を示します。

<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/

97
margusholland

インライン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経由のデモ 。
フォークされたJS Fiddle 。

JSのマークアップでは、Fiddle最初のオプションには値が割り当てられていないため、クリックしても関数は何もしません。デフォルト値であるため、selectを選択し、その最初のデフォルトoptionを選択しても、changeイベントはトリガーされません。

更新：
最新の例（2017-08-09）のリダイレクトURLは、JS Fiddleと両方のドメイン、および両方のドメインと 'sameorigin 'フレームコンテンツ用-アルバート

18
David Thomas

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>

Jqueryを使用したJavascript

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

.select_locationクラスを任意のSelect要素クラスに追加することにより、この関数を再利用できるようになります

4
Somwang Souksavatd
    {{-- 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>
0
Saifur Rahman

これは、選択コントロールのonchangeイベントにコードを追加することによりアーカイブできます。

例えば：

<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>
0
Codemaker

インライン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>
0
Yuriy Kots