javascriptで要素を選択するスクリプト

Question

html select要素のイベントリスナーをスタイル設定したり追加したりすることは難しいです。

予想される動作 選択オプションのテキスト内容を警告したいと思います。

これは、HTMLコードです：

<select name="chooseSub" id="chooseSub" placeholder="Here we go"> 
    <option value="makeChoice" id="disabled">--Make a choice-- </option> 
    <option value="ai" id="ai">Artificial Intelligence</option> 
    <option value="angularJs" id="angularJs">AngularJs</option> 
    <option value="css" id="css3">CSS3</option> 
</select> 

そしてこれはjavascriptのコードです：

var select = document.getElementById('chooseSub'); 

select.addEventListener('click', function(event) { 
    if (event.target && event.target.nodeName === 'option') { 
    alert(event.target); 
    } 
}); 

実際の動作 それはすべて

Answer 1

あなたはミーンましたで何もしませんこの？

var select = document.getElementById('chooseSub'); 
 

 
select.addEventListener('change', function(event) { 
 
    alert(event.target.selectedOptions[0].text); 
 
});

<select name="chooseSub" id="chooseSub" placeholder="Here we go"> 
 
    <option value="makeChoice" id="disabled">--Make a choice-- </option> 
 
    <option value="ai" id="ai">Artificial Intelligence</option> 
 
    <option value="angularJs" id="angularJs">AngularJs</option> 
 
    <option value="css" id="css3">CSS3</option> 
 
</select>

Answer 2

function myFunction(opt){ 
 
alert(opt.options[opt.selectedIndex].text); 
 
/*if you want value of selected option : alert(opt.options[opt.selectedIndex].value);*/ 
 
}

<select name="chooseSub" id="chooseSub" placeholder="Here we go" onChange='myFunction(this)'> 
 
    <option value="makeChoice" id="disabled">--Make a choice-- </option> 
 
    <option value="ai" id="ai">Artificial Intelligence</option> 
 
    <option value="angularJs" id="angularJs">AngularJs</option> 
 
    <option value="css" id="css3">CSS3</option> 
 
</select>