Question

释

我需要实现，选择下拉列表中的值之后它应该自动在下面创建新行，如图所示。

样品

如果选择选项A ，它应该生成行号（在这种情况下为1 ），标题列包含所选值的名称和2个输入字段（ 日期从＆日期到），在它之后如果（例如）我们选择选项C 它应该再生成1个新行，只需要新的行号（在这种情况下将是2 ）

CODE

简单下拉列表：

我没有想法如何实现它，我试图发挥可见性，但远离我的需要......

还应将选定的选项插入数据库。

更新

同一选项无法选择两次，只能添加一次。如果点击错误，也应该在行附近显示1. C [ ] [ ] X 2. A [ ] [ ] X 3. D [ ] [ ] X以删除行。

行的排序：

如果我选择C，后来的A和它之后它应该按顺序出现：

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

如果我从列表中删除A它应该出现：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace ISR.CustomValidators
{
  [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
  sealed public class IsIPaddress : ValidationAttribute, IClientValidatable
  {
    private const string DefaultErrorMessage = "{0} is not a valid IP address.";

    public IsIPaddress() : base(DefaultErrorMessage)
    {
    }

    public override string FormatErrorMessage(string name)
    {
      return string.Format(ErrorMessageString, name);
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
      if (value != null)
      {
        Regex rgIP4 = new Regex(@"^(([01]?\d\d?|2[0-4]\d|25[0-5])\.){3}([01]?\d\d?|25[0-5]|2[0-4]\d)$");
        Regex rgIP6 = new Regex(@"^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$");

        if (rgIP4.IsMatch(value.ToString()))
        {
          return ValidationResult.Success;
        }
        if (rgIP6.IsMatch(value.ToString()))
        {
          return ValidationResult.Success;
        }
      }
      return null;
    }

    IEnumerable<ModelClientValidationRule> IClientValidatable.GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
      return new[] { new ModelClientValidationIsIPaddress(FormatErrorMessage(metadata.GetDisplayName()))     };
    }
  }

  public class ModelClientValidationIsIPaddress : ModelClientValidationRule
  {
    public ModelClientValidationIsIPaddress(string errorMessage)
    {
      ErrorMessage = errorMessage;
      ValidationType = "isipaddress";
    }
  }
}

Answer 1

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

Answer 2

嗯，我在工作时没有看到你的更新......但是更新了

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

这是您可以

的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 id="action2">

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

这是插件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
  });
});

以下是插件的选项

 {
    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:;'
    }
  }

你可以编辑改变的东西..清除代码..太多的工作...但我希望你可以自己添加更多的选项和功能.. 祝你好运

Answer 3

我根据你指定的内容给了它一个镜头。这应该会给你一个很好的开始。它的工作原理是根据您的选择在表单中显示某些div。你可以在这里试试http://jsfiddle.net/v4gNL/530/

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

和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();
    }
  });
});

Answer 4

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

Answer 5

我如何添加下拉列表

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

我想在没有文字字段的情况下添加下拉列表

选择值后的下拉列表创建新字段

5 个答案: