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

Question

I want to add 2 dropdowns list side by side. Like first dropdown for skills like HTML5,CSS3,JS,PHP etc and 2nd dropdown for levels like begineer,advanced,expert etc. I also want to have an add button so i can keep on adding more skills. Below code helps me to add 2 buttons but vertically instead of aide by side. But I want to know how to have an add button.

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

For populating options in second dropdown based on first, following is the [reference](http://jsfiddle.net/RajeshDixit/817Ladnn/). Also kindly explain your question in more detail. Its little confusing. — Rajesh, Nov 06 '15 at 08:10
regarding the "add" button: should the added skills be saved on the server? because if they should then you would need some serverside-language like for example PHP, ASP or JSP. — low_rents, Nov 06 '15 at 08:15
Thank you Rajesh. I want 2 dropdowns side by side. one for skills and another for level. Skills dropdowns will have C,C++,Java etc and Level dropdown will have begineer,expert,advanced etc. I want an add button to add another skill in next line. Like i have a skill C with level of expert and also skill Java with level of begineer. so an add button will work here. hope you got it. — , Nov 06 '15 at 08:41

score 0 · Answer 1 · answered Nov 06 '15 at 08:25

add button will add "abc" option in skills select box.

$( "#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>

Thank you Nikki. But I want add button to be on the same line. Also it should add a skill and level option in next line instead of above function. For example when you are adding list of experiences in a career page you can have a multiple experiences and an add button will help to add those multiple experiences. — , Nov 06 '15 at 08:47

Mahesh · Answer 2 · 2015-11-06T11:48:25.997

Try This... I hope this is your expected result :)

<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>");
}

Looks perfect but add button not working. Thanks anyways – Nov 06 '15 at 13:16 — , Nov 06 '15 at 13:16

score 0 · Accepted Answer · answered Nov 06 '15 at 11:36

0

try this then...

$( "#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>

answered Nov 06 '15 at 11:36

Nikkishah

86
1
7

Hey nikki. I am finding a strange problem. Whenever I am clicking on add button its landing me on a different page and displays add successfully message. Can you tell me why? – Nov 10 '15 at 09:08
Can you share your code here ? As there is no redirection code in the above "Add" button click fuction. – Nikkishah Nov 11 '15 at 07:31
I am afraid if I can paste it as its too long. Actually I have a form list created and when entered details, it will land me to a desired page. For this I have register button. But I do not know how this ADD button doing the same function. Any idea? – Nov 11 '15 at 11:44
Sorry. But I can't suggest you anything without digging into your code. However, you can check if "Add" button's id or class matches with the register button's properties. Or debug it using browser debugger. – Nikkishah Nov 12 '15 at 09:35
....This is the code for the register button and for add button I have added the same code what you wrote down. – Nov 12 '15 at 13:29
Can you share the redirect function that is being called when you click "Add" or "Register" button? – Nikkishah Nov 13 '15 at 08:23
...... – Nov 13 '15 at 11:19
– Nov 13 '15 at 11:21
Hey nikki...I have added code here.... http://stackoverflow.com/questions/33705927/instead-of-adding-another-element-it-is-landing-to-a-another-page – Nov 14 '15 at 06:50

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

3 Answers3