选择选项元素上的单击事件不起作用 [英] click event on select option element doesn't work

问题描述

我知道我必须将 id 更改为 val ，但是如何？任何想法？对不起，这可能对你们来说太简单了，但对我来说不是这样： - ）

• 每个选项滚动到特定的标签， 't work

http： //jsfiddle.net/9w0L7fxb/

var body = $（'html，body'）; $（'＃London '）.on（click，function（e）{e.preventDefault（）; body.animate（{scrollTop：slideMap.offset（）。top - 63}，'slow'）; return false;}）; $ （option＃London）。change（function（）{$（this）.val（）;}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< select class =country-list> < option value =id =>选择您的城市< / option> < option value =Londonid =London> London< / option> < option value =CapeTownid =CapeTown>开普敦< / option> < option value =Beijingid =Beijing>北京< / option> < option value =Tokyoid =Tokyo> Tokyo< / option> < option value =HongKongid =HongKong>香港< / option> < option value =KualaLumpurid =KualaLumpur>吉隆坡< / option> < option value =新加坡id =新加坡>新加坡< / option> < option value =Mumbaiid =Mumbai>孟买< / option> < option value =Shanghaiid =Shanghai>上海< / option> < option value =Sydneyid =Sydney>悉尼< / option> < option value =StPetersburgid =StPetersburg> St。堡< /选项> < option value =SanPauloid =SanPaulo>圣保罗< / option> < option value =SanFranciscoid =SanFrancisco>旧金山< / option> < option value =Dallasid =Dallas> Dallas< / option> < option value =NewYorkid =NewYork>纽约< / option> < option value =Dubaiid =Dubai> Dubai< / option>< / select>  

http://jsfiddle.net/ym4frmp6/ 您应该使用

   > var body = $（'html，body'）; $（b）
 $（'。country-list'）。on（change，function（）{
 //确保val（）不为空：
 if （$（this）.val（））{
 body.animate（{
 scrollTop：$（'＃'+ $（this）.val（））。offset（）。 b $ b}，'slow'）; 
} 
 
 return false; 
}）; 
  

JSFiddle

I know I have to change the id into a val but how??? any idea? sorry, It might be so easy for you guys but not for me:-)

• each option scrollTo a specific tag, but on click doesn't work

http://jsfiddle.net/9w0L7fxb/

var body = $('html, body');

$('#London').on("click", function (e) {
    e.preventDefault();
  
    body.animate({
        scrollTop: slideMap.offset().top - 63
    }, 'slow');

    return false;
});

$("option#London").change(function () {
    $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="country-list">
    <option value="" id="">select your city</option>
    <option value="London" id="London">London</option>
    <option value="CapeTown" id="CapeTown">Cape Town</option>
    <option value="Beijing" id="Beijing">Beijing</option>
    <option value="Tokyo" id="Tokyo">Tokyo</option>
    <option value="HongKong" id="HongKong">Hong Kong</option>
    <option value="KualaLumpur" id="KualaLumpur">Kuala Lumpur</option>
    <option value="Singapore" id="Singapore">Singapore</option>
    <option value="Mumbai" id="Mumbai">Mumbai</option>
    <option value="Shanghai" id="Shanghai">Shanghai</option>
    <option value="Sydney" id="Sydney">Sydney</option>
    <option value="StPetersburg" id="StPetersburg">St. Petersburg</option>
    <option value="SanPaulo" id="SanPaulo">São Paulo</option>
    <option value="SanFrancisco" id="SanFrancisco">San Francisco</option>
    <option value="Dallas" id="Dallas">Dallas</option>
    <option value="NewYork" id="NewYork">New York</option>
    <option value="Dubai" id="Dubai">Dubai</option>
</select>

http://jsfiddle.net/ym4frmp6/

解决方案

You should use change event.

var body = $('html, body');

$('.country-list').on("change", function () {
    // make sure, the val() is not empty:
    if($(this).val()){
        body.animate({
            scrollTop: $('#'+$(this).val()).offset().top - 63
        }, 'slow');
    }

    return false;
});

JSFiddle

这篇关于选择选项元素上的单击事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！