Question

我将解释这个场景。我有一个网站，我正在尝试为我的网站中的成员收集“业务类型”。我显示已经输入的所有现有业务，然后允许用户选择其中一个。如果用户希望输入另一种“业务类型”，我允许他选择“** OTHER”。当他点击“** OTHER”时，会显示一个框，其中用户输入他的“业务类型”并添加。

现在如果用户有多个业务，我允许他“添加其他”。当他点击“添加其他”时，他再次显示“业务类型”，包括之前输入的那个。如果用户再次选择“** OTHER” - 将显示一个框，当用户输入另一个“业务类型”时，前一个框和当前框中将显示相同的内容。

我希望新值只应替换为新选择框而不是之前的选择框。我该如何实现这一目标。

我已经编写了一个类似的小代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function showfield(name){
  if(name=='**OTHER')
 var oth_busi_type = prompt("Please enter a new county", "");
    if (oth_busi_type != null) {
                $(var_1).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');
    }}

$(document).on('click', '.add-more', function() {
            console.log($('.details:eq(0)').clone());
               $('.details:eq(0)').clone(true).appendTo('.details-parent');
});
</script>
</head>
<body>
<div class="details-parent">    
<div class="details">    
<table class="extra_table" summary="">
<tr>
    <td class="aligntop bold">*Location:</td>
    <td class="extra_field_input">
         <select class='County' name='County'  id='var_1' onchange='showfield(this.options[this.selectedIndex].value)' >             
              <option value="Select County..." selected="selected">Select County...</option>
              <option value="DODGE" >DODGE</option>
              <option value="DOUGLAS" >DOUGLAS</option>
              <option value="LANCASTER" >LANCASTER</option>
              <option value="MADISON" >MADISON</option>
              <option value="**OTHER">**OTHER</option>
         </select>
    </td>
</tr>
<tr>    
    <td class="aligntop bold extra" style="display:none;">**Enter if **OTHER</td>
    <td class="extra_field_input">
          <input style="display:none;" type="text" size="17" name="Other_County" id="busi_type"  />
    </td>
</tr>
</table>
<div class="add-more">
    <a href="#">Add more</a> 
</div>

</div>    
</div>    

</body>
</html>

Answer 1

问题来自这行代码：

$(var_1).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');

//I assure that $(var_1) is just for ex.. and you've done $('#var_1') in your actual code 这里var_1是id，所以你实际上是将所有选择的值更改为最后一个..

此处的简单修复onchange事件甚至会将this作为参数传递，并仅更改该选择的值。

所以在html：

//passing additional param this
<select class='County' name='County'  id='var_1' onchange='showfield(this.options[this.selectedIndex].value,this)' >

和您的js：

//ref is this
function showfield(name,ref){
  if(name=='**OTHER')
 var oth_busi_type = prompt("Please enter a new county", "");
    if (oth_busi_type != null) {
//use ref instead of var_1
                $(ref).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');
    }}

Answer 2

请在下面找到更新的代码

我也创造了

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready (function (e){
    var details = $('.details:eq(0)').clone(true);
    $(document).on ('change', '.County', function (e){
        if ($(this).val() =='**OTHER'){
            var oth_busi_type = prompt("Please enter a new county", "");
        }

        if (oth_busi_type != null) {
            $(this).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');
        }
    });

    $(document).on('click', '.add-more', function() {
        console.log($('.details:eq(0)').clone());
        $(details).clone(true).appendTo('.details-parent');
    });
});
</script>
</head>
<body>
<div class="details-parent">
    <div class="details">
        <table class="extra_table" summary="">
            <tr>
                <td class="aligntop bold">*Location:</td>
                <td class="extra_field_input">
                     <select class='County' name='County'  id='var_1' >
                          <option value="Select County..." selected="selected">Select County...</option>
                          <option value="DODGE" >DODGE</option>
                          <option value="DOUGLAS" >DOUGLAS</option>
                          <option value="LANCASTER" >LANCASTER</option>
                          <option value="MADISON" >MADISON</option>
                          <option value="**OTHER">**OTHER</option>
                     </select>
                </td>
            </tr>
            <tr>
                <td class="aligntop bold extra" style="display:none;">**Enter if **OTHER</td>
                <td class="extra_field_input">
                      <input style="display:none;" type="text" size="17" name="Other_County" id="busi_type"  />
                </td>
            </tr>
        </table>
        <div class="add-more">
            <a href="#">Add more</a>
        </div>
    </div>
</div>
</body>
</html>

jQuery只替换新的选择框而不是早期的

2 个答案: