如何创建与添加选项并排的依赖下拉列表

How to create dependent dropdown list side by side with an add option

本文关键字：选项 下拉列表 依赖 添加 何创建 创建      更新时间：2023-09-26

我想并排添加两个下拉列表。像HTML5，CSS3，JS，PHP等技能的第一个下拉列表和初学者，高级，专家等级别的第二个下拉列表。我还想有一个添加按钮，这样我可以继续添加更多的技能。下面的代码帮助我添加2个按钮，但垂直而不是并排。但我想知道如何有一个添加按钮。

<label for="skills">Skills</label>
<div id="example1" class="bs-docs-example">
<select class="step1">
<option value="">Please select an option</option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
</div>
<label for="skills">Level</label>
<div id="example2" class="bs-docs-example1">
<select class="step2">
<option value="">option</option>
<option>Option5</option>
<option>Option6</option>
<option>Option7</option>
<option>Option8</option>
</select>
</div>

试试这个。。。

$( "#add" ).click(function() {
   var row = $("#wrapper-1").clone();
    //row.remove("#add");
  $('#wrapper').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper" width="100%">
    <div id="wrapper-1" style="float: left; width: 85%;">
    <div id="first" style="float: left; width: 65%;"> 
        <label for="skills">Skills</label>
        <select id="one" class="step1">
            <option value="">Please select an option</option>
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
            <option>Option4</option>
         </select>
    </div>
    <div class="general" style="float: left; width: 35%;"> 
        <label for="skills">Level</label>
        <select class="step2">
            <option value="">option</option>
            <option>Option5</option>
            <option>Option6</option>
            <option>Option7</option>
            <option>Option8</option>
            </select>
    </div>
    </div>
      <div class="add-general" style="float: left; width: 15%;">
        <button id="add"> add </button>
    </div>  
 </div>

添加按钮将在技能选择框中添加"abc"选项。

$( "#add" ).click(function() {
  $('#one').append( new Option("abc","abc") );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; overflow: hidden;">
    <div style="width: 70%; float: left;" id="example1"class="bsdocs-example"> 
        <label for="skills">Skills</label>
        <select id="one" class="step1">
            <option value="">Please select an option</option>
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
            <option>Option4</option>
         </select>
    </div>
    <div style="margin-left: 30%" id="example2"> 
        <label for="skills">Level</label>
        <select class="step2">
            <option value="">option</option>
            <option>Option5</option>
            <option>Option6</option>
            <option>Option7</option>
            <option>Option8</option>
            </select>
    </div>
    <div style="margin-top:100px" id="example2">
        <button id="add"> add </button>
    </div>
</div>

试试这个。。。我希望这是你期望的结果：）

<table>
    <tr>
        <td><label for="skills">Skills</label></td>
        <td colspan="2">
        <select id="one" class="step1">
            <option value="">Please select an option</option>
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
            <option>Option4</option>
        </select></td>
        <td><label for="skills">Level</label></td>
        <td colspan="2">
        <select id="two" class="step2">
            <option value="">option</option>
            <option>Option5</option>
            <option>Option6</option>
            <option>Option7</option>
            <option>Option8</option>
        </select></td>
        <td><button onclick="addSkill()"> add skill </button></td>
    </tr>
</table>
<label id="currentSkills"></label>

javascript

function addSkill(){
    var newSkill=$('#one').val();
    var newLevel=$('#two').val();
    console.log(newSkill);
    $('#currentSkills').append(newSkill+'-'+newLevel+"<br>");
}
相关文章：