CODEWITHSUNDEEP
jqueryevents
Vov4ik
Vov4ik

Reputation: 333

SELECT-like onChange event with jQuery

I have a little dropdown menu similar <select>, which contolled from external js-function.
HTML:

<ul class="select" id="select">
   <li>
      <a href="javascript:void(0);" class="selectlink" id="price_type">UAH</a>
      <ul>
         <li onclick="onchange('elm0', 0);" >
            <a href="javascript:void(0);" id="elm0">UAH</a></li>
         <li onclick="onchange('elm1', 1);" >
            <a href="javascript:void(0);" id="elm1">USD</a></li>
         <li onclick="onchange('elm2', 2);" >
            <a href="javascript:void(0);" id="elm2">EUR</a></li>
         <li onclick="onchange('elm3', 3);" style="border-bottom:1px solid #54616E">
            <a href="javascript:void(0);" id="elm3">...</a></li>
      </ul>
   </li>
</ul>

and onchange-function using jQuery:

function onchange(id, index) {
  $("#price_type").html($("#"+id).html());
  updateData(index);
}

where updateData(index) does an AHAH Request to change the content according to argument index. But I want to change this old source using jQuery and therefore without onclick="onchange('elm...', ...);". And because I've started to learn jQuery 2 days ago, I need some help about how is it correct:

$(function() {
   $("ul#select li ul li").click(function() {
      var id = $("[id^=elm]").attr("id").match(/\((\d+)\)/)[1];
      $("#price_type").html($("#elm"+id).html());
      updateData(id);
   });
});

and I make something wrong... Thank you for your Answers!

Upvotes: 0

Views: 4537

Answers (1)

jeef3
jeef3

Reputation: 1997

I would actually attach the click() to the anchor rather than the list item.

$("ul#select li ul li a").click(function() {
    $("#price_type").html($(this).html());

    var id = $(this).attr("id")).match(/\((\d+)\)/)[1];
    updateData(id);

    return false; // Now you can also remove the javascript:void(0) from your anchors onClick
});

Upvotes: 2

Related Questions