堆栈内存溢出
  简体   繁体   English

从jQuery中动态生成的下拉按钮获取值

[英]Get values from drop down button generated dynamically in jquery

 原文  2018-05-23 05:48:51  6   2    javascript/ jquery

问题描述

I am a simple category form that consists of a button Choose the Item that acts like a drop down component. 我是一个简单的分类形式，它由一个按钮的Choose the Item ，其作用类似于一个下拉组件。 Initially, the content form is a static html and when the user clicks on Add Content , another content form is added / duplicated dynamically. 最初，内容表单是静态html，并且当用户单击“ Add Content ，会动态添加/复制另一个内容表单。

There is a button called Choose the Item, that when clicked, it gives a drop down list, showing the values and the user selects a value, the button name changes to that value selected. 有一个名为Choose the Item,的按钮Choose the Item,单击该按钮会显示一个下拉列表，其中显示了值，并且用户选择了一个值，按钮名称更改为所选的值。

Here in this example, the look and feel is not the same because of missing bootstrap libraries. 在此示例中，由于缺少引导程序库，因此外观不同。

The issue that I am having that, the click event is not working on the second generated dynamically content. 我遇到的问题是，点击事件不适用于第二个动态生成的内容。 That, is I am unable to click the button Choose the Item when I add another content. 那就是我添加其他内容时无法单击Choose the Item按钮。 Can someone please help me with this ? 有人可以帮我吗？ 

 var count = 1; $('.js-add').click(function() { count++; var content = ` <div class="form-control-group"> <h3>Content No. `+count+`</h3> <div class="form-control"> <label for="volume">Item</label> <button type="button" id="volume-menu`+count+`" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Choose the item </button> <ul class="mdl-menu mdl-js-menu" for="volume-menu`+count+`"> <li class="mdl-menu__item" data-value="10">10</li> <li class="mdl-menu__item" data-value="20">20</li> <li class="mdl-menu__item" data-value="30">30</li> </ul> </div> </div> <br>` $('.main').append(content); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <title>Page Title</title> </head> <body> <div class="btn btn-success js-add"> Add Content </div> <div class="main"> <div class="form-control-group"> <h3>Content No. 1</h3> <div class="form-control"> <label for="volume">Item</label> <button type="button" id="volume-menu" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Choose the item </button> <ul class="mdl-menu mdl-js-menu" for="volume-menu"> <li class="mdl-menu__item" data-value="10">10</li> <li class="mdl-menu__item" data-value="20">20</li> <li class="mdl-menu__item" data-value="30">30</li> </ul> </div> </div> <br> </div> </body>

2 个解决方案

解决方案1
 2 已采纳  2018-05-23 07:06:16

There is a button called Choose User that when clicked, it gives a drop down list, showing the values and the user selects a value, the button name changes to that value selected. 有一个名为“选择用户”的按钮，单击该按钮会显示一个下拉列表，其中显示了值，并且用户选择了一个值，按钮名称更改为所选的值。

Add this part of code 添加这部分代码 

$(document.body).on("click", "li.mdl-menu__item", function() {
  $(this).parent().prev().text($(this).text());
  $(this).parent().toggleClass('hidden');
});

the click event is not working on the second generated dynamically content. click事件不适用于第二个动态生成的内容。 That, is I am unable to click the button Choose User when I add another category. 那是我添加其他类别时无法单击选择用户按钮。

This type of event definition solve this problem and you used it. 这种类型的事件定义解决了此问题，您已使用它。 Your code works well and I did not face this issue. 您的代码运行良好，我没有遇到这个问题。 

$(document.body).on("click", "button.js-user-select", function() {
  $(this).next().toggleClass('hidden');
});

I think this helps you 我认为这对您有帮助 

 $(document.body).on("click", "button.js-user-select", function() { $(this).next().toggleClass('hidden'); }); $(document.body).on("click", "li.mdl-menu__item", function() { $(this).parent().prev().text($(this).text()); $(this).parent().toggleClass('hidden'); }); var count = 1; $(".add-other").click(function() { count++; var content = `<div class="form-control-grp"> <h3>Category ` + count + `</h3> <div class="form-control"> <label for="volume">Type of User</label> <button type="button" id="user-list" class="mdl-button js-user-select mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Choose user </button> <ul class="mdl-menu mdl-js-user hidden" for="user-list"> <li class="mdl-menu__item" data-value="10">User Specialist</li> <li class="mdl-menu__item" data-value="20">User Moderator</li> </ul> <input type="hidden" id="user" name="user"> </div> </div>`; $(".main").append(content); }); 
 .hidden { display: none } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="submit" class="add-other">Add Category </button> <div class="main"> <div class="form-control-grp"> <h3>Category 1</h3> <div class="form-control"> <label for="volume">Type of User</label> <button type="button" id="user-list" class="mdl-button js-user-select mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Choose user </button> <ul class="mdl-menu mdl-js-user hidden" for="user-list"> <li class="mdl-menu__item" data-value="10">User Specialist</li> <li class="mdl-menu__item" data-value="20">User Moderator</li> </ul> <input type="hidden" id="user" name="user"> </div> </div>

Update 更新

1- Add this for updating dom 1-添加此以更新dom 

componentHandler.upgradeDom();

2- Add this for button text 2-添加此按钮文字 

$(document).on("click", "li.mdl-menu__item", function() {
  $(this).parent().parent().prev().text($(this).text());
});

3- make id dynamic with ${count} instead of your usage. 3-使用${count}而不是您的用法）使ID动态。 

 var count = 1; $(document).on("click", "li.mdl-menu__item", function() { $(this).parent().parent().prev().text($(this).text()); }); $('.js-add').click(function() { count++; var content = ` <div class="form-control-group"> <h3>Content No. ${count}</h3> <div class="form-control"> <label for="volume">Item</label> <button type="button" id="volume-menu-${count}" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Choose the item </button> <ul class="mdl-menu mdl-js-menu" for="volume-menu-${count}"> <li class="mdl-menu__item" data-value="10">10</li> <li class="mdl-menu__item" data-value="20">20</li> <li class="mdl-menu__item" data-value="30">30</li> </ul> </div> </div> <br>` $('.main').append(content); componentHandler.upgradeDom(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <title>Page Title</title> </head> <body> <div class="btn btn-success js-add"> Add Content </div> <div class="main"> <div class="form-control-group"> <h3>Content No. 1</h3> <div class="form-control"> <label for="volume">Item</label> <button type="button" id="volume-menu-1" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Choose the item </button> <ul class="mdl-menu mdl-js-menu" for="volume-menu-1"> <li class="mdl-menu__item" data-value="10">10</li> <li class="mdl-menu__item" data-value="20">20</li> <li class="mdl-menu__item" data-value="30">30</li> </ul> </div> </div> <br> </div> </body>

解决方案2
 0  2018-05-23 05:58:28

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
$(document).ready(function(){
$(document.body).on('click', 'li.mdl-menu__item', function () {
    var selectedID = $(this).closest('ul');
    var countID = $(selectedID).attr("for");
    var cnt = $(selectedID).attr("for").replace("volume-menu","");
    $("#volume-menu"+ cnt).html($(this).text());
 });
var count = 1;
$('.js-add').click(function() {
    count++;
     var content = `        

                <div class="form-control-group">
            <h3>Transport No. `+count+`</h3>

            <div class="form-control">
                <label for="volume">Volume</label>

                <button type="button" id="volume-menu`+count+`" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                    Choose the volume
                </button>

                <ul class="mdl-menu mdl-js-menu" for="volume-menu`+count+`" >
                    <li class="mdl-menu__item" data-value="10">10</li>
                    <li class="mdl-menu__item" data-value="20">20</li>
                    <li class="mdl-menu__item" data-value="30">30</li>
                </ul>

            </div>
        </div>


        <br>` 
   $('.main').append(content);
   componentHandler.upgradeDom();
});
})
</script>
<title>Page Title</title>
</head>
<body>
<div class="btn btn-success js-add">Add Content</div> 
<div class="main">
    <div class="form-control-group">
        <h3>Transport No. 1</h3>
        <div class="form-control">
            <label for="volume">Volume</label>
            <button type="button" id="volume-menu" class="mdl-button js-custom-select mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                Choose the volume
            </button>
            <ul class="mdl-menu mdl-js-menu" for="volume-menu" >
                <li class="mdl-menu__item" data-value="10">10</li>
                <li class="mdl-menu__item" data-value="20">20</li>
                <li class="mdl-menu__item" data-value="30">30</li>
            </ul>
        </div>
    </div>
    <br>
    </div>
</body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从动态生成的下拉列表中获取值 - get values from dynamically generated drop down 从动态生成的输入字段获取内部数据而不保存值-jQuery - Getting data inside drop down from dynamically generated input fields without values being saved - jquery 使用Jquery获取选中的单选按钮和选定的下拉值 - Get checked Radio Button and Selected Drop down values using Jquery 从表中获取值并在单击按钮时下拉列表 - Get values from the table and drop down list on button click 无法从使用jQuery下拉中获取所选值 - Not able to get the selected values from Drop down using jQuery jQuery：从新div中动态生成的按钮获取文本 - Jquery: get text from dynamically generated button in new div Jquery 从动态生成的输入文本中获取值 - Jquery get values from dynamically generated input texts 从动态生成的下拉菜单中删除一个选项 - Remove an option from dynamically-generated drop down menu jQuery动态更新下拉菜单 - jQuery dynamically update drop down 在 Jquery 中动态选择下拉列表 - Dynamically select Drop Down in Jquery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM