click event on select option element не работает

Я знаю, что мне нужно изменить id на val, но как ??? Есть идеи? извините, это может быть не так легко для вас, ребята, но не для меня :-)click event on select option element не работает

каждый вариант scrollTo определенный тег, но по щелчку не работает

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/

источник

2015-02-06 user3699998

Элементы опции обычно не запускают события кликов, вы должны использовать событие изменения на выбранном – adeneo

. Вы имели в виду '$ ('# London')'? –

Нет, это не так: вы не можете слушать события на отдельном

Вы должны использовать 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

источник

2015-02-06 14:55:15

изначально щелчок даже корректно работает, но поскольку я меняю html динамически, на select/option мне нужно также изменить событие click в событие изменения. – user3699998

@ user3699998, вы слушаете изменения, внесенные в элемент 'select'. Вы не можете прослушивать нажатие кнопки «option». –

http://jsfiddle.net/gago9osr/, пожалуйста, взгляните на это, прежде чем на размер рабочего стола мне нужно событие click! – user3699998

вот обновленная скрипка: http://jsfiddle.net/ym4frmp6/4/

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

события на изменении выбора, и вы получите значение параметра по телефону $(this).val()

это решает вопрос о событии щелчка.

источник

2015-02-06 14:53:53 indubitablee

спасибо, как я могу сохранить функцию щелчка? и реализовать свои? – user3699998

Я думаю, что я говорю, что вы не можете использовать '.click()' на выбор, потому что щелчок даже запустится, прежде чем вы выберете что-то (он будет срабатывать, когда вы откроете выделение по существу), вы будете иметь использовать этот '.change()', но вы можете поместить остальную часть вашего общего кода для анимации (если ее функция) внутри этого события изменения, и он будет работать так, как вы намеревались его работать – indubitablee

ну, я почти там но он не прокручивается до идентификатора # секции? Есть идеи? – user3699998

Вот другой подход, я думаю, что проще: (запустить его непосредственно ниже)

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» принимают значение из выбранной «опции».

Edit 2

Упрощенная снова изменив $(this).val() в e.currentTarget.value.

источник

2015-02-06 15:03:48

click event on select option element не работает

ответ

Смежные вопросы