JS表单操作

JS 处理动态input 输入框

场景

有一组输入框需要通过按钮进行动态添加，或者删除 类似如下功能，
点击‘增加商品规格‘ 添加一行，左侧减号代表删除一行。

代码部分-div

<div class="new_list">
<div class="new_list_first">&nbsp;</div>
  <ul>
  	<li><input type="text" name = "spec_name" id = "spec_name[]"  value="" > </li>
  	<li><input type="text" name = "spec_no"  id = "spec_no[]"  value=""  > </li>
  	<li><input type="text" name = "spec_price"  id = "spec_price[]" value=""  "> </li>
  	<li><input type="text" name = "spec_num"  id = "spec_num[]"  value=""  "> </li>
  	<li><i class="icon-minus-sign" onclick="removesome(event)"></i> </li>
</ul>
</div>
<div class="type_add_new" id="type_add_new" >
    <p><i class="icon-plus-sign"></i> 增加商品规格</p>
</div>

代码部分-div

//增加
$("#type_add_new").click(function () {
        var html = '<div class="new_list"><div class="new_list_first">&nbsp;</div>' +
          '<ul><li><input type="text" name = "spec_name" id = "spec_name[]" > </li>\n' +
          '      <li><input type="text" name = "spec_no" id = "spec_no[]"  "> </li>\n' +
          '      <li><input type="text" name = "spec_price" id = "spec_price[]"  > </li>\n' +
          '      <li><input type="text" name = "spec_num" id = "spec_num[]"   "> </li>\n' +
          '      <li><input type="hidden" name = "spec_variationid"  id = "spec_variationid[]" ></li> \n'+
          '<li><i class="icon-minus-sign" onclick="removesome(event)"></i> </li>\n ' +
          '</ul>\n' +
          '         </div>';
        $(".type_add_new").before(html);
      });
     //删除
  function removesome(e) {
	$(e.currentTarget).parents('.new_list').remove();
	    if(!($('div').is('.new_list'))){
	      $("#type_spec").css('display', 'none');
	      $("#type_add").css('display', 'block');
	      $(".dis_play").css('display', 'block');
    }
  }
  提交的时候用用ajax处理后提交
  $('#type_spec').find('ul').each(function(){
          var  spec_name =$(this).find("input[name='spec_name']").val();
          var  spec_no =$(this).find("input[name='spec_no']").val();
          var  spec_price = $(this).find("input[name='spec_price']").val();
          var  spec_num = $(this).find("input[name='spec_num']").val();
         
	spec_array.push({name:spec_name,variation_sku:spec_no,price:spec_price,stock:spec_num,variation_id:spec_variationid});
});

  如果用form 表单（序列话提交的话）提交的话。需要对div进行处理
eg:
  	<li><input type="text" name = "spec_name[1]" id = "spec_name[]"  value="" > </li>
  	<li><input type="text" name = "spec_no[1]"  id = "spec_no[]"  value=""  > </li>
  	<li><input type="text" name = "spec_price[1]"  id = "spec_price[]" value=""  "> </li>
  	<li><input type="text" name = "spec_num[1]"  id = "spec_num[]"  value=""  "> </li>
处理形式如上，将name 名字改为数组

在编辑前端页面时候遇到的其它问题

1.问题：当处理如下问题时候，我点击绿色按钮时候，需要让这一行移动到下面‘未开启’的的div 中的时候 。那么我点击‘未开启‘栏中的 黑色按钮，发现我触发不聊这个点击事件。

处理方法：
事件委托 什么是事件委托可自行百度
使用jq 的 on事件

 $('#switch-state').on('click', '.switch_on',function(){
       	//这里是要执行的交互
      });

2.问题：要实现如下交互，当点击下拉框的时候我要加载厦门的 下拉选项，（下拉选项有上百条，需要有关键字搜索功能，这里不采用ajax去后台读取，数据影响交互）

处理方法 ：
先把下拉选项加载到页面来，使用一个js数组来存储。读取的时候直接读取这个js数组

js 数组存储格式

	var data[] = [{"value":"测试1"},{"value":"测试2"},{"value":"测试3"},{"value":"测试4"},{"value":"测试5"}]


    $("input[id^='other_search']").bind('input propertychange',function(){

      var search_val = $(this).val();
      var query = querySelect(search_val,data);
      var string = "";
      var len = query.length;
      if(len>=15){
        len = 15;
      }
      for(var i=0;i<len;i++){
        string +="<li attr-id="+attr_index+" >"+query[i]['value']+"</li>";
      }

      $(this).parents('.attribute_content').find('.attr_values ul').html('')
      $(this).parents('.attribute_content').find('.attr_values ul').append(string);
    });
//val 为输入框中的值 localData 为 data 数组
    function querySelect(val, localData) {
      var tempArry = []
      for (var i = 0, l = localData.length; i < l; i++) {
        if (localData[i].value.indexOf(val) != -1) {
          tempArry.push(localData[i]);
          if (tempArry.length == 15) {
            return tempArry;
          }
        }
      }
      return tempArry;
    }