Javascript 从下拉列表中动态添加特定favicon选项

带有调用上面div块显示的

+

按钮的完整代码，以及必须添加新

组件的

：

我有这样一个下拉列表：

<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上的一个新列表项，包含所选社交网络的favicon和具有引入值的输入

我怎样才能做到呢？谢谢

解决

已更改此块：

<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>

啁啾
LinkedIn
脸谱网
添加

与：

<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>

啁啾
LinkedIn
好的
脸谱网
Vk.com
Добавить

然后，在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);

});

$（'addSocialNetwork'）。在（'click'，function（）上{
var selectedIcon=$（'select#u social'）.val（）；
var selectedInput=$（'select#u input'）.val（）；
变量模板='
'
$（“#existingSocials”）.append（模板）；
});

说明：

用户单击

+

按钮，会出现一个带有社交网络下拉列表的

div

。每个选择的值都与

fav图标的
class
相等。然后，用户向他的社交网络引入一个价值（链接）。当他点击添加按钮确认时。运行一个脚本，该脚本获取当前选定选项的值，该选项是favicon的
类
，然后获取输入值（链接）并准备一个完整的模板，在下一步中，该模板将附加到现有块中

解决

已更改此块：

<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>


啁啾
LinkedIn
脸谱网
添加

与：

<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>


啁啾
LinkedIn
好的
脸谱网
Vk.com
Добавить

然后，在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);

});

$（'addSocialNetwork'）。在（'click'，function（）上{
var selectedIcon=$（'select#u social'）.val（）；
var selectedInput=$（'select#u input'）.val（）；
变量模板='
'
$（“#existingSocials”）.append（模板）；
});

说明：

用户单击
+
按钮，会出现一个带有社交网络下拉列表的
div
。每个选择的值都与
fav图标的
class
相等。然后，用户向他的社交网络引入一个价值（链接）。当他点击添加按钮确认时。运行一个脚本，该脚本获取当前选定选项的值，该选项是favicon的
类，然后获取输入值（链接）并准备一个完整的模板，在下一步中，该模板将附加到现有块。
您可以使用
append（）
添加元素和
：为图标选择
文本

如果要添加
元素，请将其包装到

堆栈片段


$（.btn添加”）。在（“单击”，函数（）上{
$（“.main”）.append（
您可以使用
append（）
添加元素，并为图标选择
：文本

如果要添加
元素，请将其包装到

堆栈片段


$（.btn添加”）。在（“单击”，函数（）上{
$（“.main”）.append（”
@BhuwanBhatt
+
按钮位于该下拉列表上方。当我单击它时，该div显示在我应该选择社交网络和价值的位置。提交后，它必须添加到上方的div中。我将使用该按钮和div编辑我的代码。@BhuwanBhatt
+
按钮位于该下拉列表上方。当我单击它时，该div显示在我选择的位置uld选择社交网络和价值。提交后，必须将其添加到上面的div中。我将使用此按钮和div编辑我的代码。