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

Question

我正在尝试使用 jQuery 动态创建添加/删除表单字段，用户可以根据下拉选择提交多个查询。最后，它应该生成带有选择组合的 URL。到目前为止，我已经成功地创建了带有多个查询选项的添加/删除表单字段。

例如，如果用户提交了关于汽车的输入，那么它将生成如下 URL:

exmaple.com/?car=xxx

这是有效的。

如果用户提交汽车和自行车的输入，那么它应该生成:

exmaple.com/?car=xxx&bike=yyy

但它的生成方式如下:

exmaple.com/?car=xxx&car=yyy

那么我该如何解决这个问题呢？提前谢谢你。

$(function() {
  $.fn.addmore = function(options) {
    var moreElement = this,
      singlePreSelectedValue = '',
      selectedValue = [],
      defaultOption = {
        addText: 'add more',
        removeText: 'Remote',
        selectBoxDuplicate: true,
        avoidDuplicationSelection: function(e) {
          var o = e;
          if ($.inArray($(o).val(), selectedValue) != -1) {
            $(o).val(singlePreSelectedValue);
            alert('Value already selected.');
          } else {
            var hasSelectValue = true;
            $.each($('.removeDuplication'), function(i, v) {
              if ($(this).val() == 'select') {
                hasSelectValue = false;
                return false;
              }

            });

          }
        },
        prevSelectedValue: function(e) {
          var o = e;
          selectedValue = [];
          $.each($('.removeDuplication'), function(i, v) {
            if ($(this).val() != 'select') {
              selectedValue.push($(this).val());
            }
          });
          singlePreSelectedValue = $(o).val();
        }
      }
    defaultOption = $.extend(true, defaultOption, options);

    /*        $(this).find('select').prepend('<option value="select" selected>Select</option>');*/
    $(moreElement).after('<a href="javascript:void(0)" data-id="more">' + defaultOption.addText + '</a>');
    $('[data-id="more"]').click(function() {
      var dataMore = this,
        removeDuplication = [];
      $(dataMore).before($(moreElement).clone().find('input').not('input[type="submit"]').val('').end().end().find('select.removeDuplication').focus(function() {
        if (!defaultOption.selectBoxDuplicate) {
          defaultOption.prevSelectedValue(this);
        }
      }).change(function() {
        if (!defaultOption.selectBoxDuplicate) {
          defaultOption.avoidDuplicationSelection(this);
        }
      }).end().append(function() {
        return $('<a href="javascript:void(0)" class="circular deleteCons icon icon-functional button" data-id="remove"><i class="fa fa-trash"></i> ' + +'</a>').click(function() {
          $(this).parent().remove();
        });
      }));
      if (!defaultOption.selectBoxDuplicate) {
        $.each($('.removeDuplication'), function(i, v) {
          if ($(this).val() != 'select') {
            removeDuplication.push($(this).val());
          }
        });
        $.each(removeDuplication, function(i, v) {
          $('.removeDuplication').last().find('option[value="' + removeDuplication[i] + '"]').remove();
        });
      }
    });
    $('.removeDuplication').focus(function(e) {
      defaultOption.prevSelectedValue(this);
    }).change(function() {
      defaultOption.avoidDuplicationSelection(this);
    });
    return this;
  }

  $('dl').addmore({
    addText: 'Add',
    removeText: 'Remove',
    selectBoxDuplicate: false
  });
});




$(document).ready(function() {
  $("select").change(function() {
    var str = $(this).val();
    $("#searchtermid").attr("name", str);

  });
});

<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 class="navbar-form" action="" method="get" action="demo_form.asp">
  <dl>
    <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>
  </dl>
  <input class="btn btn-primary" type="submit" value="Submit">
</form>

从Standard Quality 获得输入后，我修改了我的脚本和 html。 https://jsfiddle.net/paul85/wjhqszmg/

但是还是不让用户提交输入表单。最重要的是，当用户从中提交时，应该重定向到正确生成 URL 的页面。如果用户提交汽车和自行车输入，则重定向页面地址或 URL 将为:

exmaple.com/?car=xxx&bike=yyy

HTML

<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="/results.html" method="get">
  <div class="input_fields_wrap">
      <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"></textarea>
      </div>
  </div>
  <button class="add_field_button">Add More Fields</button>
  <input class ="btn btn-primary" type="submit" value="Submit" >
</form>

JavaScript

$(document).ready(function() {
    var max_fields      = 3; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var form = $('#main-form');
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="form-field">\
                                <select class="removeDuplication">\
                                    <option value=""></option>\
                                    <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"></textarea>\
                                <a href="#" class="remove_field">Remove</a>\
                                </div>'); //add input box
        } else {
        alert("Sorry, you have reached maximum add options.");
      }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

    $(document).on('change','select.removeDuplication',function(e) {
        e.preventDefault();
        var cI = $(this);
        var others=$('select.removeDuplication').not(cI);
        $.each(others,function(){
            if($(cI).val()==$(this).val() && $(cI).val()!="") {
                $(cI).val('');
                alert($(this).val()+' already selected.');
            }
        });
    });
  /*$(form).submit(function(e){*/
    form.on('submit', function(e) {
        e.preventDefault()
        var queries = [];
        var slectedall=true;
        var fillupfield=true;
        form.find('.form-field').each(function(index, field) {
            var query = {};
            query.type = $(field).find('select').val();
            query.value = $(field).find('textarea').val();
            if (query.type !=""){
                queries.push(query);
            } else{
                slectedall=false;
            }
        });

        for (i = 0; i < queries.length; i += 1) {
            var query = queries[i];
            if (query.value.trim() ===""){
                fillupfield=false;
            }       
        };
        if (slectedall===false){
            alert('Please select option.');
        } else {
            if (fillupfield===false){
                alert('Please insert your searchterm.');
            } else {
          $("form").submit();
            }

        }

    });
});

Answer 1

看起来您正在扩展 jQuery，这不是必需的，并且有助于使代码更不清晰。老实说，我什至没有仔细研究它来找出问题——相反，我从头开始写了一些东西。 StackOverflow 代码片段不允许使用表单，所以这是一个有效的 JSBin:http://jsbin.com/gokodaluna/edit?html,js,output

(请注意，我稍微更改了您的 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>

Javascript:

/* 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;

})

编辑:在您问题的修订代码中，您在该 if-else 语句中调用了 $("form").submit()。当您触发它时，较大的函数仍在捕获 submit 事件，因此它会立即再次运行 e.preventDefault()。如果您需要简单地将用户转发到新的 URL，只需使用 window.location.href = 进行设置。请参阅上面我的(编辑的)代码的最后几行。