HTMLを選択メニュー

Question

私は選択メニューの助けを望んでいました。 希望のメニュー項目をURLにリンクして、target = "_ blank"属性を使って新しいタブ/ウィンドウを開くことを望みます。

は現在、私のコードは次のようになります。

<form action=""> 
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')"> 
<option value="">~ Please Select a Website from the List Below ~</option> 
<option value="https://anysite01.com" target="_blank">LINK 1</option> 
<option value="https://anysite02.com" target="_blank">LINK 2</option> 
<option value="https://anysite03.com" target="_blank">LINK 3</option> 
</select> 
</form> 

私の問題は、私は何にもリンクする最初のオプションを（~~下記のリストからサイトを選択してください）したくないということです。それはまだドロップダウンメニューにある必要があります。これを行う方法はありますか？ もう1つ。私はonClickの使用に反対していません。

ありがとうございました！

Answer 1

これは少しjQueryで解決できます。

<select id="selectList"> 
    <option value="0">~ Please Select a Website from the List Below ~</option> 
    <option value="1" data-link="https://anysite01.com">LINK 1</option> 
    <option value="2" data-link="https://anysite02.com">LINK 2</option> 
    <option value="3" data-link="https://anysite03.com">LINK 3</option> 
</select> 

や機能を追加（jQueryの使用）変化する値に対応する：：へのあなたのhtmlが

変更このことができます

$('#selectList').change(function() { 
     if ($(this).val() != 0) { 
     var link = $('#selectList option:selected').data('link'); 
     window.open(link); 
     }; 
}); 

希望。アラートのあるJSFiddleでテストされたので、リダイレクトはこのように動作するはずです。

Answer 2

はちょうどそれをクリックして無効にするには、これに最初のオプション変更：あなたのケースでは

<option value="" disabled selected>>~ Please Select a Website from the List Below ~</option> 

Answer 3

を<select>タグが何を達成することを意図していないので、あなたは、選択メニューとして何か他のものを使用する必要がありますあなたは尋ねています。 :)

Bootstrap plugin's drop-downsをご覧ください。その中にリンクがあるドロップダウンを作成することで、あなたが望むものを達成することができます。これと同じように：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    ~ Please Select a Website from the List Below ~ 
 
    </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
    <a class="dropdown-item" href="http://www.google.com" target="_blank">Google</a> 
 
    <a class="dropdown-item" href="http://www.yahoo.com" target="_blank">Yahoo</a> 
 
    </div> 
 
</div>

あなたはそれが（アウトオブボックス）をどのように見えるかに上記のコードを実行することができます。

Answer 4

<form action=""> 
    <select onchange="window.open(this.options[this.selectedIndex].value,'_blank')"> 
    <option value="" disabled>~ Please Select a Website from the List Below ~</option> 
    <option value="https://anysite01.com" target="_blank">LINK 1</option> 
    <option value="https://anysite02.com" target="_blank">LINK 2</option> 
    <option value="https://anysite03.com" target="_blank">LINK 3</option> 
    </select> 
</form> 

disabled属性はブール値属性です。

存在する場合は、オプションを無効にする必要があることを指定します。

無効なオプションは使用できず、クリックできません。

disabled属性は、他の条件が満たされるまで（チェックボックスの選択など）ユーザーがオプションを選択しないように設定できます。無効な値を削除し、オプションを選択可能にするには、JavaScriptが必要です。