0

私は非常にイライラする問題を抱えています。結果をフィルタリングして選択ボックスに入力するこのコードがあります

var syn = <?=json_encode($syn)?>;
function filterByCity() {
        var e = document.getElementById("city_filter");
        var city = e.options[e.selectedIndex].value;
        var selectOptions = document.getElementById('syn_list');
        selectOptions.options.length = 0;

        for (i = 0; i < syn.length; i++) {
            if (city == syn[i]['city'] || city == 'all') {
                selectOptions.options[selectOptions.options.length] = new Option(syn[i]['name'], syn[i]['id'] + '" onclick="updateTxtContent(\'' + syn[i]['id'] + '\')');
            }
        }
    }

ご覧のとおり、ページ自体のソースコードで見栄えのするすべての選択「オプション」に onclick リスナーを追加していますが、それを編集にコピーすると、「updateTxtContent()」関数が呼び出されません。

<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;">
<option value="13&quot; onclick=&quot;updateTxtContent('13')">option a</option>
<option value="14&quot; onclick=&quot;updateTxtContent('14')">option b</option>

明らかに、私が気付いていないこれを行うためのより良い方法があるはずです。

4

4 に答える 4

3

select タグで onchange イベントを試してみてください。

<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;" onchange='updateTxtContext(this.value);'>
于 2012-10-09T21:36:26.370 に答える
2

オプションではなく、選択にイベントハンドラーを設定したいと思います。私が何を意味するかについては、このフィドルを参照してください

<select size="10" name="syn_list" id="syn_list" class="span12" dir="rtl" style="text-align:right;" onchange="updateTxtContent();">
<option value="13">option a</option>
<option value="14">option b</option>
</select>

<script>
function updateTxtContent(){
 alert($("#syn_list").val());   
}   
</script>
​

または、jQueryを使用していないように見えるため：

function updateTxtContent(){
    var e = document.getElementById("syn_list");
    var f = e.options[e.selectedIndex].value;    
    alert(f);
}
于 2012-10-09T21:39:37.247 に答える
0

2016年現在、選択に対してクリックイベントがサポートされており、オプションがターゲットとしてクリックされているようです。

jQueryの使用

click_handler = function(e) {
    alert('clicked on: ' + e.target.value);
}

$('#syn_list').click(click_handler);

少なくとも Firefox 44 で動作します

于 2016-04-21T07:42:23.930 に答える
0

オプション要素は、ほとんどのブラウザでクリック イベントを持つことができません。

そして、新しいオプションは値とテキストを設定していますが、他の属性を設定できると思う理由がわかりません。

select 要素で change イベントを使用したい。

于 2012-10-09T21:34:44.890 に答える