Question

我知道我必须将id更改为val但是如何???任何的想法？对不起，这对你们来说可能很容易，但不适合我： - ）

每个选项都滚动到一个特定的标签，但点击“不能正常工作”

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

http://jsfiddle.net/ym4frmp6/

Answer 1

这里有更新的小提琴：http://jsfiddle.net/ym4frmp6/4/

$('.country-list').on("change", function (e) {
    e.preventDefault();
    var selection = $(this).val();
    alert(selection);
});

事件是在更改选择时，您可以通过调用$(this).val()

来获取选项值

这解决了点击事件的问题。

Answer 2

您应该使用 change 事件。

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

Answer 3

这是另一种方法，我认为它更简单:(直接在下面运行）

var $body = $('html,body'),
     $select = $('select.country-list');

$select.change(function (e) {   
    var aTag = $("a[name='"+ e.currentTarget.value +"']");
    $body.animate({scrollTop: aTag.offset().top - 40 },'slow');
});

body{
    position: relative;
    height:100%;min-height:100%;
}

select{
    position: fixed;
}

a{
    display : block;
    margin-top : 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="country-list">
    <option value="">select your city</option>
    <option value="London" >London</option>
    <option value="CapeTown" >Cape Town</option>
    <option value="Beijing" >Beijing</option>
    <option value="Tokyo" >Tokyo</option>
    <option value="HongKong" >Hong Kong</option>
    <option value="KualaLumpur" >Kuala Lumpur</option>
    <option value="Singapore">Singapore</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Shanghai">Shanghai</option>
    <option value="Sydney">Sydney</option>
</select>
<br>
<a href="#" name="London">London</a><br>
<a href="#" name="CapeTown">CapeTown</a><br>
<a href="#" name="Beijing">Beijing</a><br>
<a href="#" name="Tokyo">Tokyo</a><br>
<a href="#" name="HongKong">HongKong</a><br>
<a href="#" name="KualaLumpur">KualaLumpur</a><br>
<a href="#" name="Singapore">Singapore</a><br>
<a href="#" name="Mumbai">Mumbai</a><br>
<a href="#" name="Shanghai">Shanghai</a><br>
<a href="#" name="Sydney">Sydney</a><br>

修改

将$select.find('option:selected').val()更改为$(this).val()。它的工作原理是因为“select”元素从其选定的“选项”中获取值。

修改2

将$(this).val()更改为e.currentTarget.value再次简化。

选择选项元素上的click事件不起作用

3 个答案: