Fatal编程技术网
  • javascript/
  • Javascript 根据html表单中的多个下拉选择更改输入名称？

Javascript 根据html表单中的多个下拉选择更改输入名称？

javascript jquery html forms

Javascript 根据html表单中的多个下拉选择更改输入名称？,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我正在尝试使用jQuery动态创建添加/删除表单字段，用户可以根据下拉选择提交多个查询。到目前为止，我已经使用多个查询选项创建了添加/删除表单字段 例如，如果用户提交了一辆汽车的输入，那么它将生成如下URL： exmaple.com/？car=xxx 这是有效的 如果用户提交汽车和自行车的输入，则应生成： exmaple.com/?car=xxx&bike=yyy 但它产生的结果是： exmaple.com/?car=xxx&car=yyy 那么我该如何解决这个问题呢？先谢谢

我正在尝试使用jQuery动态创建添加/删除表单字段，用户可以根据下拉选择提交多个查询。到目前为止，我已经使用多个查询选项创建了添加/删除表单字段

例如，如果用户提交了一辆汽车的输入，那么它将生成如下URL：

exmaple.com/？car=xxx

这是有效的

如果用户提交汽车和自行车的输入，则应生成：

exmaple.com/?car=xxx&bike=yyy
但它产生的结果是：

exmaple.com/?car=xxx&car=yyy
那么我该如何解决这个问题呢？先谢谢你

$（函数（）{
$.fn.addmore=函数（选项）{
var morelement=这个，
singlePreSelectedValue=''，
selectedValue=[]，
默认选项={
addText:“添加更多”，
removeText:“远程”，
selectBoxDuplicate:true，
避免重复选择：函数（e）{
var o=e；
if（$.inArray（$（o）.val（），selectedValue）！=-1）{
$（o）.val（单预选值）；
警报（'已选择值'）；
}否则{
var值=真；
$.each（$（'.removeDuplication'），函数（i，v）{
if（$（this）.val（）=='select'）{
hasSelectValue=false；
返回false；
}
});
}
},
prevSelectedValue:函数（e）{
var o=e；
selectedValue=[]；
$.each（$（'.removeDuplication'），函数（i，v）{
如果（$（this.val（）！='select'）{
selectedValue.push（$（this.val（））；
}
});
singlePreSelectedValue=$（o）.val（）；
}
}
defaultOption=$.extend（true，defaultOption，options）；
/*$（this.find（'select'）。prepend（'select'）*/
$（moreElement）。在（''）之后；
$（'[data id=“more”]'）。单击（函数（）{
var dataMore=这个，
RemovedUpplication=[]；
$（dataMore）.before（$（morelement）.clone（）.find（'input'）.not（'input[type=“submit”]）.val（''.end（）.end（）.find（'select.removeDuplication'）.focus（函数（）{
如果（！defaultOption.selectBoxDuplicate）{
defaultOption.prevSelectedValue（此）；
}
}).change（函数（）{
如果（！defaultOption.selectBoxDuplicate）{
defaultOption.AvoidReplicationSelection（此选项）；
}
}).end（）.append（函数（））{
返回$（''）。单击（函数（）{
$（this.parent（）.remove（）；
});
}));
如果（！defaultOption.selectBoxDuplicate）{
$.each（$（'.removeDuplication'），函数（i，v）{
如果（$（this.val（）！='select'）{
removeDuplication.push（$（this.val（））；
}
});
$。每个（移除的复制，函数（i，v）{
$（'.removeDuplication'）.last（）.find（'option[value=“'+removeDuplication[i]+'”）.remove（）；
});
}
});
$（'.removeDuplication'）。焦点（函数（e）{
defaultOption.prevSelectedValue（此）；
}).change（函数（）{
defaultOption.AvoidReplicationSelection（此选项）；
});
归还这个；
}
$（'dl'）。添加更多({
addText:“添加”，
removeText:“删除”，
selectBoxDuplicate:false
});
});
$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
var str=$（this.val（）；
$（“#searchtermid”）.attr（“name”，str）；
});
});


汽车
自行车
飞机

看起来您在扩展jQuery，这是不必要的，而且会使代码变得不那么清晰。老实说，我甚至还没有深入研究它来找出问题所在——相反，我从零开始写了一些东西。StackOverflow代码段不允许表单，因此这里有一个可用的JSBin：

（注意，我对HTML标记做了一点更改）

HTML:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form id="main-form" class="navbar-form" action="" method="get" action="demo_form.asp">
  <div class="fields">
    <div class="form-field">
      <select class="removeDuplication">
        <option value="car">Car</option>
        <option value="bike">Bike</option>
        <option value="plane">Plane</option>
      </select>
      <textarea class="form-control custom-control" name="car" id="searchtermid" placeholder="Search term" data-toggle="tooltip" data-placement="bottom" rows="3" style="resize:none" required></textarea>
    </div>
  </div>  
  <input class="btn btn-secondary" type="button" value="Add" id="form-add">
  <input class="btn btn-primary" type="submit" value="Submit">
</form>

<h2 id="final-url"></h2>

</body>
</html>



/* Save your initial variables */
var form = $('#main-form');
var formFields = form.find('.fields')
var addButton = $('#form-add');
var emptyInput = $('.form-field').clone(); // clone this at initialization so we always have an empty field
var finalUrl = $("#final-url");

addButton.on('click', function() {
  emptyInput.clone().appendTo(formFields);
  /* clone this again so our initial field is always empty and available */
})

form.on('submit', function(e) {
  e.preventDefault()
  var queries = [];
  form.find('.form-field').each(function(index, field) {
    var query = {};
    query.type = $(field).find('select').val();
    query.value = $(field).find('textarea').val();
    queries.push(query);
  });
  var url = window.location.href;
  for (i = 0; i < queries.length; i += 1) {
    var query = queries[i];
    var ampOrQ = (i === 0) ? "?" : "&";
    url += ampOrQ + query.type + "=" + query.value;
  }

  /* print the URL into the dom if you want to see it working */
  finalUrl.text(url);

  /* or forward users to the new URL you've generated */
  window.location.href = url;

})




JS-Bin
汽车
自行车
飞机


Javascript:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form id="main-form" class="navbar-form" action="" method="get" action="demo_form.asp">
  <div class="fields">
    <div class="form-field">
      <select class="removeDuplication">
        <option value="car">Car</option>
        <option value="bike">Bike</option>
        <option value="plane">Plane</option>
      </select>
      <textarea class="form-control custom-control" name="car" id="searchtermid" placeholder="Search term" data-toggle="tooltip" data-placement="bottom" rows="3" style="resize:none" required></textarea>
    </div>
  </div>  
  <input class="btn btn-secondary" type="button" value="Add" id="form-add">
  <input class="btn btn-primary" type="submit" value="Submit">
</form>

<h2 id="final-url"></h2>

</body>
</html>



/* Save your initial variables */
var form = $('#main-form');
var formFields = form.find('.fields')
var addButton = $('#form-add');
var emptyInput = $('.form-field').clone(); // clone this at initialization so we always have an empty field
var finalUrl = $("#final-url");

addButton.on('click', function() {
  emptyInput.clone().appendTo(formFields);
  /* clone this again so our initial field is always empty and available */
})

form.on('submit', function(e) {
  e.preventDefault()
  var queries = [];
  form.find('.form-field').each(function(index, field) {
    var query = {};
    query.type = $(field).find('select').val();
    query.value = $(field).find('textarea').val();
    queries.push(query);
  });
  var url = window.location.href;
  for (i = 0; i < queries.length; i += 1) {
    var query = queries[i];
    var ampOrQ = (i === 0) ? "?" : "&";
    url += ampOrQ + query.type + "=" + query.value;
  }

  /* print the URL into the dom if you want to see it working */
  finalUrl.text(url);

  /* or forward users to the new URL you've generated */
  window.location.href = url;

})



/*保存初始变量*/
变量形式=$（“#主形式”）；
var formFields=form.find（“.fields”）
var addButton=$（“#表单添加”）；
var emptyInput=$（'.form字段'）.clone（）；//在初始化时克隆此字段，以便始终有一个空字段
var finalUrl=$（“最终url”）；
addButton.on（'单击'，函数（））{
emptyInput.clone（）.appendTo（formFields）；
/*再次克隆此字段，以便初始字段始终为空且可用*/
})
表格（‘提交’）功能（e）{
e、 预防默认值（）
var查询=[]；
form.find（'.form-field'）。每个（函数（索引，字段）{
var query={}；
query.type=$（field）.find（'select'）.val（）；
query.value=$（field.find（'textarea'）.val（）；
查询。推送（查询）；
});
var url=window.location.href；
对于（i=0；i<0.length；i+=1）{
var query=查询[i]；
变量ampOrQ=（i==0）？“？”：“&”；
url+=ampOrQ+query.type+“=”+query.value；
}
/*如果希望看到URL正常工作，请将其打印到dom中*/
最终文本（url）；
/*或者将用户转发到您生成的新URL*/
window.location.href=url；
})



编辑：在问题中修改的代码中，您正在调用
$（“表单”）.submit（）
在if-else语句中。触发此操作时，较大的函数仍在捕获
submit
事件，因此它会立即再次运行
e.preventDefault（）。如果您只需要将用户转发到新的URL，只需将其设置为
window.location.href=
。请参见上面我的（已编辑）代码的最后几行
 感谢您的代码和反馈。但它仍然没有解决我的问题。我已经用你的代码再次更新了我的问题。