stackoom
  简体   繁体   中英

Dropdown list after selecting value create new fields

 原文  2016-01-22 14:14:32  7   5    javascript/ jquery/ html/ html5

Question

EXPLAINATION

I need achieve, that after value from dropdown list is selected It should automatically create new line below as shown in image.

SAMPLE

If Option A is selected, It should generate row number ( in this case 1 ), title column with selected value's name and 2 input fields ( Date From & Date To ), after It If (for example) we select Option C It should generate 1 more new line, just with new row number ( in this case will be 2 )

下拉列表

CODE

Simple dropdown list: 

<select>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
  <option value="D">Option D</option>
</select>

I don't have ideas how can I achieve It, I've tried to play with visibility, but far away from what I need...

Also selected options should be inserted to database.

UPDATE

The same option can't be selected twice, It can be added only 1 time. There also should appear X near row to remove row if clicked wrong.

Sorting of rows:

If I select C, later A and after It D It should appear in order: 

 1. C [      ]  [      ] X
 2. A [      ]  [      ] X
 3. D [      ]  [      ] X

If I remove A from list It should appear: 

 1. C [      ]  [      ] X
 2. D [      ]  [      ] X -- this row number should change.

5 answers

solution1
 2 ACCPTED  2016-01-22 15:10:44

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {

        $('#select_id').change(function () {
            var szTr;
            var iRowCount = 0;

            var szSelectedText = $(this).find('option:selected').text();


            if ($("#table tbody tr:has(td:eq(1):contains('" + szSelectedText + "'))").length > 0) {
                alert("Duplicate!!!!")
                return;
            }
            else {
                iRowCount = $('#table tbody tr').length + 1;
                szTr = "<tr>"
                szTr = szTr + "<td>" + iRowCount + "</td>";
                szTr = szTr + "<td>" + $(this).find('option:selected').text() + "</td>"
                szTr = szTr + "<td><input type='text' class='date_from'></td>"
                szTr = szTr + "<td><input type='text' class='date_to'></td>"
                szTr = szTr + "<td class='delete'>Delete</td>"
                szTr = szTr + "</tr>"
                $('#table tbody').append(szTr)
            }

        });

        $('#table').on('click','.delete',function () {
            $(this).closest('tr').remove();
            $('#btnSort').trigger('click');
        });

        function sortTable(table, order) {

            tbody = table.find('tbody');

            tbody.find('tr').sort(function (a, b) {
                if (order == "asc") {
                    return $('td:eq(1)', a).text().localeCompare($('td:eq(1)', b).text());
                } else {
                    return $('td:eq(1)', b).text().localeCompare($('td:eq(1)', a).text());
                }
            }).appendTo(tbody);
        }

        $('#btnSort').click(function () {

            var iCounter = 1;

            sortTable($('#table'), "asc")

            $('#table tbody tr').each(function () {

                $(this).find('td:eq(0)').text(iCounter);

                iCounter = iCounter + 1;

            });
        });

    });
</script>
</head>
<body>

<select id="select_id">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
  <option value="D">Option D</option>
</select>

    <table id="table" >
        <thead>
  <tr>
    <td></td>
    <td>title</td>
    <td>Date from</td>
    <td>Date to</td>
  </tr>
            </thead>
        <tbody>



        </tbody>
</table>

    <input type="button" value="Sort Table" id="btnSort"/>
</body>
</html>

solution2
 2  2016-01-22 16:24:23

Hmmm i didnt see your update while working on it... but Updated

https://jsfiddle.net/p76L4327/7/

Here is the html you can 

 <body>
  <select id='options'>
    <option value="0">Select an option</option>
    <option value="1">Option A</option>
    <option value="2">Option B</option>
    <option value="3">Option C</option>
    <option value="4">Option D</option>
  </select>
  <form action="">
    <div id="action2">

    </div>
    <div id='submit'>
      <br>
      <input type="submit" value="Submit">
    </div>
  </form>
</body>

Here is the plugin optionTest 

   $(function() {
  $.fn.optionTest = function(opts) {
    var option = $.extend({}, $.fn.optionTest.defaults, opts);


    $(this).change(function() {
            option.holderObject=$(this);

      if (option.clearOnChange) {
        $(option.actionId).empty();
      }
      var val = $(this).val();
      if ($.fn.optionTest.isArray(val)) {
        $.fn.optionTest.parseArray(val, option);
      } else {
                var label =$(this).children("option:selected").eq(0).text();
        $.fn.optionTest.parseContent(val, option, label);
      }

      $('.' + option.removeLinkOptions.class).click(function(event) {
        $.fn.optionTest.removeRow(this, option);
        event.preventDefault();

      });
      return this;
    });
  };
  $.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
  };
  $.fn.optionTest.defaults = {
    clearOnChange: false,
    actionId: '#action',
    indexOptions: {
      class: 'row-index'
    },
    rowOptions: {
      id: 'option',
      class: 'test-css',
      tag: 'tr'
    },
    fromOptions: {
      name: 'from',
      type: 'text',
      value: 'from',
      size: 20
    },
    toOptions: {
      name: 'to',
      type: 'text',
      value: 'to',
      size: 20
    },
    removeLinkOptions: {
      class: 'removeRow',
      href: 'javascript:;'
    }
  };
  $.fn.optionTest.parseArray = function(vals, options) {
  var selectedOptions = options.holderObject.children("option:selected");
  console.log(selectedOptions.eq(0).html());
    $.each(vals, function(key, val) {
      $.fn.optionTest.parseContent(val, options,selectedOptions.eq(key).text());
    });
  };
  $.fn.optionTest.removeRow = function(elem, options) {
    var row = $(elem).parent().closest(options.rowOptions.tag);
    row.remove();
    $.fn.optionTest.updateRowIndex(options);
  };

$.fn.optionTest.updateRowIndex = function(options) {
    $("." + options.rowOptions.class).each(function(key,value) {
      var index = key+1;
      $(value).attr('rowdataid',index);
      $(value).children("."+options.indexOptions.class).html(index);
    });
  };

  $.fn.optionTest.createColumn = function(content) {
    var td = $('<td>');
    return td.append(content);
  }
  $.fn.optionTest.parseContent = function(val, options ,label) {

    var index = $('.' +    options.rowOptions.class).length+1;    


    var rowData = $.extend({}, options.rowOptions);
    var indexData = $.extend({}, options.indexOptions);

    rowData.rowDataId = index;    
    rowData.id = rowData.id + '-' + val;
    var fromData = $.extend({}, options.fromOptions);
    fromData.name = fromData.name + '-' + val;
    fromData.id = fromData.id + '-' + val;
    var toData = $.extend({}, options.toOptions);
    toData.name = toData.name + '-' + val;

    if ($('#' + rowData.id).length == 0) {
      var tag = "<" + rowData.tag + ">";
      delete rowData['tag'];
      var row = $(tag, rowData);      
      var id = $('<td>', indexData).html(index);  
      var label=$('<td>').html(label);
      var from = $.fn.optionTest.createColumn($("<input>", fromData));
      var to = $.fn.optionTest.createColumn($("<input>", toData));
      var removeRow = $.fn.optionTest.createColumn($("<a>", options.removeLinkOptions).text('remove Row'));
      row.append(id).append(label).append(from).append(to).append(removeRow);

      $(options.actionId).append(row);
    }
  };
});
//Running The Plugin 
/**
Here is the Options
{
    clearOnChange:false  , 
  actionId:'#action',
    rowOptions:{
    id:'option', 
    class:'test-css'
  },
    fromOptions:{
    name:'from',
    type:'text', 
    value:'from', 
    size:20
  }, 
  toOptions:{
    name:'to',
    type:'text', 
    value:'to', 
    size:20  
  }
};
**/
$(document).ready(function() {
  $('select').optionTest({
    actionId: '#action2',
    clearOnChange: false
  });
});

Here is the options of plugin 

 {
    clearOnChange: false,
    actionId: '#action',
    rowOptions: {
      id: 'option',
      class: 'test-css'
    },
    fromOptions: {
      name: 'from',
      type: 'text',
      value: 'from',
      size: 20
    },
    toOptions: {
      name: 'to',
      type: 'text',
      value: 'to',
      size: 20
    },
    removeLinkOptions: {
      class: 'removeRow',
      href: 'javascript:;'
    }
  }

You can edit change something .. clear the code .. too many works on it .. but i hope you can add more options and functions by yourself .. good luck

solution3
 0  2016-01-22 14:39:01

I gave it a shot based on what you specified. This should give you a pretty good start. It works by showing certain divs within a form based on your selection. You can try it out here http://jsfiddle.net/v4gNL/530/

Here's the HTML 

<body>
  <select id='options'>
    <option value="0">Select an option</option>
    <option value="1">Option A</option>
    <option value="2">Option B</option>
    <option value="3">Option C</option>
    <option value="4">Option D</option>
  </select>
  <form action="">
    <div style='display:none;' id='optionA'>
      <br>1. Option A:&nbsp;
      <input type='text' class='text' name='optionAfrom' value="From" size='20' />
      <input type='text' class='text' name='optionAto' value="To" size='20' />
      <br/>
    </div>
    <div style='display:none;' id='optionB'>
      <br>2. Option B:&nbsp;
      <input type='text' class='text' name='optionBfrom' value="From" size='20' />
      <input type='text' class='text' name='optionBto' value="To" size='20' />
      <br/>
    </div>
    <div style='display:none;' id='optionC'>
      <br>3. Option C:&nbsp;
      <input type='text' class='text' name='optionCfrom' value="From" size='20' />
      <input type='text' class='text' name='optionCto' value="To" size='20' />
      <br/>
    </div>
    <div style='display:none;' id='optionD'>
      <br>4. Option D:&nbsp;
      <input type='text' class='text' name='optionDfrom' value="From" size='20' />
      <input type='text' class='text' name='optionDto' value="To" size='20' />
      <br/>
    </div>
    <div style='display:none;' id='submit'>
      <br>
      <input type="submit" value="Submit">
    </div>
  </form>
</body>

And the Javascript 

$(document).ready(function() {
  $('#options').on('change', function() {
    if (this.value == '1') {
      $("#optionA").show();
    }
    if (this.value == '2') {
      $("#optionB").show();
    }
    if (this.value == '3') {
      $("#optionC").show();
    }
    if (this.value == '4') {
      $("#optionD").show();
    }
    if (this.value > '0') {
      $("#submit").show();
    }
  });
});

solution4
 0  2016-01-22 14:55:24

<select id='options'>
    <option value="">Select an option</option>
    <option value="A">Option A</option>
    <option value="B">Option B</option>
    <option value="C">Option C</option>
    <option value="D">Option D</option>
</select>

<table id="table" >
  <tr>
    <td></td>
    <td>title</td>
    <td>Date from</td>
    <td>Date to</td>
  </tr>
</table>

<script>
  var row = 1;
  $('#options').change(function(){
  var val = $(this).val();
  if(val != '' )
  {
    var title = val;
    var tr = '<tr><td>'+row+'</td><td>Option'+title+'</td><td><input type="text" /></td><td><input type="text" /></td></tr>';
   $("#table").append(tr);
  row++;
  }
});
</script>

solution5
 -1  2017-08-02 12:57:49

how i add dropdown here 

            szTr = szTr + "<td><input type='text' class='date_from'></td>"
            szTr = szTr + "<td><input type='text' class='date_to'></td>"
            szTr = szTr + "</tr>"

i want to add dropdown here without text field

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Div is not updated after selecting value on a dropdown list Selecting a new value in a dropdown list while remembering the old value in Jquery How to create dropdown list with “new value” option? Dropdown custom Text in dropdown after selecting a value Set input fields value attribute from MYSQL database when selecting data from dropdown list Selecting a value on a dynamically populated dropdown list after the list has been populated After selecting the value from dropdown list then it shows no any value next time Laravel 8 Auto fill after selecting value on dropdown Dropdown is still disable even after selecting a value Postback after selecting a value from a dropdown jquery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM