現時点では私はこれを使用しています:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
オプション値内の場所にリダイレクトされます。しかし、期待どおりに動作しません..選択の最初のオプションをクリックすると、onChangeアクションが実行されないことを意味します。私はjavascriptについて考えていましたが、もっと良い提案ができると思います。各オプションをクリックして、その値にリダイレクトされる場合、どのように機能させることができますか?
最初のオプションはすでに選択されているため、変更イベントは発生しません。最初の値として空の値を追加し、場所の割り当てで空を確認します。
次に例を示します。
<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/
インライン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 'フレームコンテンツ用-アルバート
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要素クラスに追加することにより、この関数を再利用できるようになります
{{-- 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>
これは、選択コントロールの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>
インライン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>