从下拉列表中动态添加特定的图标

Question

带有+按钮的完整代码调用了上面div块的外观，<div class="item_socails">必须添加新的<li>组件：

我有一个这样的下拉菜单：

<div class="item_socails">
  <ul>
    <li><i class="fa fa-facebook-f"></i>
      <input value="laurie.lowe13" type="text">
    </li>
    <li><i class="fa fa-odnoklassniki"></i>
      <input value="laurie.lowe1997" type="text">
    </li>
    <li><i class="fa fa-vk"></i>
      <input value="laurie.lowe7" type="text">
    </li>
    <li>
      <button id="add_social_top" class="dropdown-button add_social waves-effect waves-blue" type="button"><span>+</span></button>
    </li>
  </ul>
</div>


<div class="show_social">
  <select>
    <option value="1">Twitter</option>
    <option value="2">LinkedIn</option>
    <option value="3">Facebook</option>
  </select>
  <input class="txt_select" type="text" value="laurie.lowe13">
  <button class="waves-effect waves-blue btn z-depth-1" type="submit">Add</button>
</div>

所以，基本上用户点击了+ 按钮，然后出现了这个div，用户必须在其中选择一个社交网络，并在输入中引入它的链接。在“添加”submit 按钮上，我想生成一个新项目，例如

<li><i class="fa fa-facebook-f"></i> <input value="laurie.lowe13" type="text" </li>

基本上，特定 div 上的新列表项，带有所选社交网络的图标和具有引入值的输入。

我怎样才能实现它？谢谢。

Answer 1

解决了

改变了这个块：

<div class="show_social">
    <select>
        <option value="1">Twitter</option>
        <option value="2">LinkedIn</option>
        <option value="3">Facebook</option>
    </select>
    <input class="txt_select" type="text"
           value="laurie.lowe13">
    <button
        class="waves-effect waves-blue btn z-depth-1"
        type="submit">Add
    </button>
</div>

与：

<div class="show_social">
    <select name="social" id="select_social">
        <option value="fa fa-twitter">Twitter</option>
        <option value="fa fa-linkedin">LinkedIn</option>
        <option value="fa fa-odnoklassniki">Ok.ru</option>
        <option value="fa fa-facebook-f">Facebook</option>
        <option value="fa fa-vk">Vk.com</option>
    </select>
    <input class="txt_select" type="text" id="select_input"
           value="laurie.lowe13">
    <button
        class="waves-effect waves-blue btn z-depth-1" id="addSocialNetwork"
        type="button">Добавить
    </button>
</div>

然后，在 JS 中：

$('#addSocialNetwork').on('click', function() {
    var selectedIcon = $('#select_social').val();
    var selectedInput = $('#select_input').val();
    var template = '<li><i class="' + selectedIcon + '"></i> <input value="' + selectedInput + '" type="text"> </li>'
    $('#existingSocials').append(template);

});

解释：

用户点击+ 按钮，出现div 和社交网络下拉菜单。每个选择的值都等于fav-icon 的class。然后，用户向他的社交网络引入一个价值（链接）。当他点击Add button 进行确认时。运行一个脚本，获取当前选定选项的值 class of favicon，然后获取输入值（链接）并准备整个模板，在下一步中将其附加到现有块。

Answer 2

您可以使用append() 添加元素并使用:selected 文本作为图标。

如果你想添加 <li> 元素，请将其包装成 <ul>

堆栈片段

$(".btn-add").on("click", function() {
  $(".main").append("<li><i class='fa fa-" + $(".show_social select").find(":selected").text().toLowerCase() + "'></i><input value=" + $(".txt_select").val() + " type='text'</li>")
})

.main {
  list-style: none;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="show_social">
  <select>
    <option value="1">Twitter</option>
    <option value="2">LinkedIn</option>
    <option value="3">Facebook</option>
  </select>
  <input class="txt_select" type="text" value="laurie.lowe13">
  <button class="waves-effect waves-blue btn btn-add z-depth-1" type="submit">Add</button>
  <ul class="main"></ul>
</div>