javascript - How to get value of selected element? -
i have multi level buttons such select 1 of button in level 1 , want show button in next level.
now, want value of button selected javascript code. below code. bring code show multi level buttons:
<script type="text/javascript"> var menuarray = ['0']; $(function () { $('.showbutton').click(function () { //get target div show var targetid = $(this).attr('target'); //hide divs $('.targetdiv').hide(); //show menu items in chain var found = false; //get containing div target number var current = $(this).parent().attr('id').tostring().charat(3); var length = menuarray.length; //remove elements of array lower clicked button for(var i=0; i<length; i++) { //check if next menu item button pressed , never delete root menu (elem == 0) if(menuarray[0] == current || menuarray[0] == 0) { $(this).addclass('selected').siblings().removeclass('selected'); found = true; } //hide div if no longer in menu structure , remove menuarray[0] if(!found) { $('#div' + menuarray[0]).hide(); menuarray.shift(); } }; //add new target beginning of array menuarray.unshift(targetid); //show each element in menu structure menuarray.foreach(function(elem, index) { if(index != 0) { $('#div' + elem).show(); } }); //get div of target show sliding effect var targetdiv = $('#div' + menuarray[0]); //show div last element on page targetdiv.insertafter('#div' + menuarray[1]); //slide out last div targetdiv.show('slide'); }); }); </script>
<div id="div0" class="buttons"> <div class="showbutton" target="1">a_level1</div> <div class="showbutton" target="1">b_level1</div> <div class="showbutton" target="1">c_level1</div> </div> <!-- div1 branch --> <div id="div1" class="targetdiv"> <div class="showbutton" target="6">a_level2</div> <div class="showbutton" target="6">b_level2</div> <div class="showbutton" target="6">c_level2</div> </div> <div id="div6" class="targetdiv"> <div class="showbutton" target="7">a_level3</div> <div class="showbutton" target="8">b_level3</div> <div class="showbutton" target="9">c_level3</div> </div>
what shall do?
inside anonymous function, inside $('.showbutton').click(function () {
can access value $(this).text();
(or $(this).html();
if need html elements it).
see following example using method::
$('.showbutton').click(function(){ $('#log').val($(this).text()); });
.showbutton{ cursor:pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div0" class="buttons"> <div class="showbutton" target="1">a_level1</div> <div class="showbutton" target="1">b_level1</div> <div class="showbutton" target="1">c_level1</div> </div> <!-- div1 branch --> <div id="div1" class="targetdiv"> <div class="showbutton" target="6">a_level2</div> <div class="showbutton" target="6">b_level2</div> <div class="showbutton" target="6">c_level2</div> </div> <div id="div6" class="targetdiv"> <div class="showbutton" target="7">a_level3</div> <div class="showbutton" target="8">b_level3</div> <div class="showbutton" target="9">c_level3</div> </div> <hr> <textarea id='log'></textarea>
Comments
Post a Comment