dimanche 28 juin 2015

show the li that has an anchor link which has a data attribute name "data-link" that match unto specified text

Base from my snippets below, firstly, If i clicked unto any branch from a dropdown that has a label of "select branch", then it will get the text from a clicked branch (anchor link e.g. Iligan) and then hide all the li's from the ul of a dropdown that has a label of "select user" and then show all li's that has a link with a data attribute named "data-link" and its content match on the text of the select branch dropdown currently clicked link but sadly not working, I can hide all li's but unable to show those li that has an anchor link with a data attribute named "data-link" which data-link content is matched to the text of the currently clicked link from the select branch dropdown. Any help, suggestions, clues, recommendations, ideas would be greatly appreciated. Thank you!

//user change pass on user management
    $(".uu .uu_dp a").click(function(e){
        $(this).parents(".uu").find(".unregistered_user").text("User: " + $(this).text());
        $(this).parents(".uu").find(".unregistered_user").attr("data-link", $(this).attr("data-link"));
        bbr = $(this).parents(".uc_header").next().find(".uu_cp_form fieldset");
        $(this).parents(".daselect").next().find("form").slideDown();
        e.preventDefault();
    });
    //u branch on user management
    $(".ub .ub_dp a").click(function(e){
        $(this).parents(".ub").find(".u_branch").text("Branch: " + $(this).text());
        $(this).parents(".ub").find(".u_branch").attr("data-link", $(this).attr("data-link"));
        $(this).parents(".daselect").find(".uu .uu_dp li").hide();
        (this).parents(".daselect").find('.uu .uu_dp li a[data-link="Iligan"]').show;
        e.preventDefault();
    });
<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1InYcE4"></script>
<link href="http://ift.tt/1K1B2rp" rel="stylesheet"/>
<div class="extend clear daselect">
                <div class="btn-group ub align_left margin_right5px">
                    <button type="button" class="btn btn-default u_branch" data-toggle="dropdown">Select branch</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>

                    <ul class="ub_dp dropdown-menu" role="menu">
                            <li><a href="#" data-identity="cp">Iligan</a></li>
                      <li><a href="#" data-identity="cp">Corporate</a></li>
                      <li><a href="#" data-identity="cp">Initao</a></li>
                    </ul>
                </div>
                <div class="btn-group uu align_left">
                  <button type="button" class="btn btn-default unregistered_user" data-toggle="dropdown">Select User</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>

                  <ul class="uu_dp dropdown-menu" role="menu" style="height: 300px;">
                        <li><a href="#" data-id="1" data-link="Iligan">User 1 of Iligan</a></li>
                    <li><a href="#" data-id="2" data-link="Iligan">User 2 of Iligan</a></li>
                    <li><a href="#" data-id="3" data-link="Iligan">User 3 of Iligan</a></li>
                    <li><a href="#" data-id="4" data-link="Corporate">User 1 of Corporate</a></li>
                    <li><a href="#" data-id="5" data-link="Corporate">User 2 of Corporate</a></li>
                    <li><a href="#" data-id="6" data-link="Initao">User 1 of Initao</a></li>
                  </ul>
                </div>
            </div>

Aucun commentaire:

Enregistrer un commentaire