我相信你在问这个：

Question

这是我的HTML代码，我需要一个jQuery代码，我可以从下拉列表中选择列表并追加到新的div ....这是我的下拉列表中的一个我可以选择图标而另一个我可以在这里选择值线，当我选择两个我可以点击按钮添加更多过滤器，它附加到新div然后选择新列表并附加到新div

<div class="slider_slect">
    <div class="fl"><dl id="sample_dc_1" class="dropdown">
            <dt></dt>
            <dd>
                <ul>
                    <li><a href="#"><img class="flag" src="images/select_img1.gif" alt="School" title="School"/></a></li>
                    <li><a href="#"><img class="flag" src="images/select_img2.gif" alt="Grade" title="Grade" /></a></li>
                    <li><a href="#"><img class="flag" src="images/select_img3.gif" alt="Gender" title="Gender" /></a></li>
                    <li><a href="#"><img class="flag" src="images/select_img4.gif" alt="Group" title="Group" /></a></li>
                    <li><a href="#"><img class="flag" src="images/select_img5.gif" alt="Race" title="Race" /></a></li>
                    <li><a href="#"><img class="flag" src="images/select_img6.gif" alt="Teacher" title="Teacher" /></a></li>
                    <li><a href="#"><img class="flag" src="images/select_img7.gif" alt="Parent" title="Parent" /></a></li>
                    <li><a href="#"><img class="flag" src="images/select_img8.gif" alt="Student" title="Student" /></a></li>
                </ul>
            </dd>
        </dl>
    </div>

    <div class="fl">
        <dl id="sample_dp_1" class="dropdown2">
            <dt><a href="#"><span></span></a></dt>
            <dd>
                <ul>
                    <li><a href="#">Value Here</a></li>
                    <li><a href="#">Value Here</a></li>
                    <li><a href="#">Value Here</a></li>
                    <li><a href="#">Value Here</a></li>
                    <li><a href="#">Value Here</a></li>
                    <li><a href="#">Value Here</a></li>
                    <li><a href="#">Value Here</a></li>
                    <li><a href="#">Value Here</a></li>
                </ul>
            </dd>
        </dl>
    </div>
</div>

<div id="add_dd"></div>
<div class="add_more_btn2">
    <a href="javascript:;" onClick="addAnswer();
            return true;">Add More Filters<span>+</span></a>
</div>

Answer 1

我相信你在问这个：

http://jsfiddle.net/mbnuV/2/

显然，这可以用于不同的properties和values，但基本上data来自value的{{1}}成功。这是最简单的上下文中的示例脚本和示例。

<强> HTML：

<select name="cars" id="model">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>

<select name="background" id="background">
<option value="blue">blue</option>
<option value="green">green</option>
</select>

<input type="button" id="makeIt" value="Make It" />

<ul id="ourData"></ul>

<强>使用Javascript：

$(function() {
    $('#makeIt').click(function() {
      var a = $('#model').val();
      var b = $('#background').val();
      $('#ourData').append('<li>'+a+'</li>');
      $('#ourData').append('<li>'+b+'</li>');

    });
});

Answer 2

试试这个

为列表添加ID，为图标列表添加icon，为值列表添加val

图标列表

<ul id="icon"> <li></li>.....<li></li> </ul>

VALUE LIST

<ul id="value"> <li></li>.....<li></li> </ul>

 function extract() {
    var icon ;
    var  value;
    icon = $('#icon li.active').find('a').html();
    value = $('#val li.active').find('a').text();
    var res = '<ul><li>' + icon + ' <li><li>' + value + ' </li></ul>';
    $('#add_add').html(res);
  }
$('#icon li').on('click', function () {
    $('#icon li').removeClass('active');
    $(this).addClass('active');
    extract();
 });

 $('#val li').on('click', function () {
    $('#val li').removeClass('active');
    $(this).addClass('active');
    extract();
 });

要完成的事项清单：

为列表项添加单击事件侦听器，以便将列表值设置为活动状态。
调用extract函数从列表中提取活动值，并将数据构造为无序列表。
最后将被处理的无序列表附加到div“add_dd”。

现场演示： http://jsfiddle.net/dreamweiver/NV4m4/47/

快乐编码：）

将数据从下拉列表附加到新div

2 个答案:

我相信你在问这个：

http://jsfiddle.net/mbnuV/2/