Getting value of OptionID when clicking?
How do I get the value of OptionID
when clicking on the Add (.plus-link
) link?
Each li may contain select (dropdown) or without it.
<ul>
<li>
<div class="menux">
<div class="text-block">
<div class="text-holder">
<h3> Item Name </h3>
<p> Description </p>
</div>
</div>
<开发者_Go百科;div optionid="46812" class="price"> <strong>£4.90</strong> </div>
<div class="add-item"> <a class="plus-link" href="#">plus</a> </div>
</div>
</li>
<li>
<div class="menux">
<div class="text-block">
<div class="text-holder">
<h3> Item Name 2 </h3> </h3>
<p> Description </p>
</div>
</div>
</div>
<form class="menu-form" action="#">
<fieldset>
<a class="plus-link" href="#">plus</a>
<select id="optionid" class="select">
<option value="1">9", £3.99</option>
<option value="2">12", £5.49</option>
</select>
</fieldset>
</form>
</li>
</ul>
Jquery
$(document).ready(function() {
$("li .plus-link").click(function(event) {
event.preventDefault();
alert( $(this).attr("OptionID") );
});
});
You want to grab the .siblings('.OptionID'). Then assuming you just want the value of that combo box, you would use .val() to get the selected value:
http://jsfiddle.net/MacAnthony/zzrrp/
EDIT
In response to the edit try this. It will look for both the select and the div with the attribute and should be able to traverse trees where it isn't a direct siblings.
http://jsfiddle.net/MacAnthony/zzrrp/4/
You can try this
Edit slightly misunderstood question there and updated for new markup
$(document).ready(function() {
$("li .plus-link").click(function(event) {
event.preventDefault();
var prev = $(this).closest('li').find('#optionid, .price');
var OptionId = prev.val() || prev.attr('optionid');
console.log(OptionId);
});
});
Example at http://jsfiddle.net/nickywaites/pTPr8/1/
You are trying to get the attribute OptionID using $(this)
which refers to the anchor.You should use prev()
to traverse the tree and get the selectbox value.
$(document).ready(function() {
$("li .plus-link").click(function(event) {
event.preventDefault();
alert( $(this).prev(".OptionID").val() );
});
});
In this case. You should use
$(document).ready(function() {
$("li .plus-link").click(function(event) {
event.preventDefault();
alert( $(this).siblings('.OptionID').val() );
});
});
精彩评论