Question

我是jquery的初学者。我被严重困住了。如果我能从代码中获得一些帮助，我将非常感激。

情景是， - 我有一个名单的下拉列表 - 当我从列表中选择一个名称时，它应显示在下拉菜单下方的div中。 div将通过jquery自动创建。从列表中选择的每个项目都将显示在各自的div中。名称Sarah不应该包含在下拉列表中。它就像一个独立的东西。但是，当我在列表中选择一个项目时，名称Sarah将替换为所选项目。

我能编码的是 - - 我可以使用与之相关的一些名称来获取div。但是，我无法将所选项目定位到其各自的div。我希望这是有道理的。我发布了我的jsFiddle的链接。请帮忙。 http://jsfiddle.net/zohana28/0akosx2a/

<div class="part-4">
    <select id="sel">
        <option value="Cheese">Cheese</option>
        <option value="Olives">Olives</option>
        <option value="Pepperoni">Pepperoni</option>
        <option value="Oregano">Oregano</option>
        <option value="Thyme">Thyme</option>
    </select>
</div>
<!--end of part 4-->
<div class="main">
    <div class="part-2" id="click-1" style="cursor:pointer;">

        <div class="part-2-address">
             <h4 id="name">sarah</h4> 
        </div>

</div>

jQuery是： $（document）.ready（function（）{

      $(document).on('change', '#sel', function (e) {

        $('.part-3').html($('.part-2').html());

       $('.main').append('<div class = "part-3" > </div>');

       var str = $('select option:selected').text();
        $('#name').text(str);  
        console.log(str);


      });
  return false;

  });

提前谢谢你。

Answer 1

我已经调整了Fiddle了一下。

 $(document).ready(function () {
  $(document).on('change', '#sel', function (e) {
      var nameTempl = '<div class="part-2" class="click-1">' 
          + '<div class="part-2-address">' 
          + '<h4 class="name">{name}</h4></div></div>';
      var str = $('select option:selected').text();
      $('.main').append(nameTempl.replace(/{name}/, str));
  });
  return true;
});

对于HTML：我删除了内联样式cursor:pointer;并将其添加为类.click-1的样式 - 之前为click-1，名称为id s，I＆＃ 39;他们都变成了班级。 id必须是唯一的，所以你必须改用类虽然可以clone() <div class="part-2" class="click-1">然后将名称更改为当前选定的选项，但我只是希望在函数中使用目标div作为模板，并使用{name}作为占位符要替换为当前选定的选项：nameTempl.replace(/{name}/, str)。

您可以更改的另一项调整是 - 我已将height:200px; div的.main设置为min-height: 200px;，因此此容器会在必要时增长。您可以将此更改回height:200px;，以防您喜欢黄色div具有如前所述的静态高度。

作为replace()的参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

使用jquery </h4>为动态创建的div定位<h4 id =“name”>标记

1 个答案: