click event on select option element doesn't work [closed]

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/

Answers:

Answer

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

Answer

here's the updated fiddle: http://jsfiddle.net/ym4frmp6/4/

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

the event is on change of the select, and you get the option value by calling $(this).val()

this solves the issue of the click event.

Answer

Here's another approach, I think it's simpler : (run it directly below)

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>

Edit

Changed $select.find('option:selected').val() into $(this).val(). It works because the "select" elements takes the value from its selected "option".

Edit 2

Simplified again by changing $(this).val() into e.currentTarget.value.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.