如何在select上设置克隆？

时间：2017-04-22 00:41:11

标签： javascript jquery select clone

我对<select>有疑问 这是我的代码

<div class="AllSize SizeSML hidden2">
    <div class="row-fluid appendSMLModel">
        <div class="row-fluid span16 appendSML" for="0">
            <div class="span3 mobileFullPhone2">
                <label>Size</label>
                <div class="select-container">
                    <select name="size_SML_select" id="SizeUniSML" validate="" required="">
                        <option value="" selected="" disabled="">Select</option>
                        <option value="small">Small</option>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                    </select>
                </div>
            </div>
            <div class="span5 mobileFullPhone2">
                <label>Stock</label>
                <input type="text" autocomplete="off" name="size_SML_input" value="" validate="" required="">
            </div>
        </div>
    </div>
</div>


$(document).on('change', '#SizeUniSML', function(e) {
    var selectval = $(this).find(":selected").val();
    if (selectval == "delete") {
        $(this).parents(".appendSML").remove();
    } else if (selectval !== "") {
        var count = $('.appendSML').length;
        var clone = $('.appendSML:first').clone();
        $('.appendSMLModel').append(clone);
    }
});

This jsfiddle

好的，这是我的问题

问题1

如果我使用clone()，如何添加代码？如果您看到上面的代码，则第一个选项仅由 small medium 和 large 填充，但我想在克隆后添加代码要删除<option value="delete">Delete</option>。就像这样

---------------------- This NOT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
    <option value="" selected="" disabled="">Select</option>
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select>
---------------------- This SELECT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
    <option value="" selected="" disabled="">Select</option>
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="delete">Delete</option>
</select>

问题2

如果我选择中等，则克隆上的中等选项将禁用 

---------------------- This NOT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
    <option value="" disabled="">Select</option>
    <option value="small">Small</option>
    <option value="medium" selected="" >Medium</option>
    <option value="large">Large</option>
</select>
---------------------- This SELECT CLONE:FIRST ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
    <option value="" selected="" disabled="">Select</option>
    <option value="small">Small</option>
    <option value="medium"  disabled="">Medium</option>
    <option value="large">Large</option>
    <option value="delete">Delete</option>
</select>

但如果我删除了选择，那么禁用选项将重新出现

问题3

如果我选择了该选项，如何关闭jquery功能？ 例如，在第一个选择中，我选择 medium ，然后会出现second clone。但是，如果我将第一个选择修改为 large ，为什么会出现第三个克隆选择？我想当我选择了select，然后再不添加克隆

3 个答案:

答案 0 :(得分：0)

我会倾向于立即制作克隆并存储它。

你可以在克隆上使用jQuery方法......甚至在你把它放入dom之前。

因此，您可以添加新选项并重置存储的克隆，例如：

var $rowClone = $('.appendSML:first').clone();
$rowClone.find('select')
         .append('<option value="delete">Delete</option>')
         .val('')
         .children()
         .prop('disabled', false);

然后当你需要添加一个新的...复制上面的$rowClone。

要停用其他选项，请使用not()选择器查找所有其他选项以忽略当前选项

$(document).on('change', '.SizeUniSML', function(e) {

  var selectval = $(this).val();
  if (selectval == "delete") {
    $(this).parents(".appendSML").remove();
  } else if (selectval !== "") {
    // clone stored row and append
    var clone = $rowClone.clone();
    $('.appendSMLModel').append(clone);
    // disable other options with same value
    $('.SizeUniSML').not(this).find('option[value="' + selectval + '"]').prop('disabled', true)
  }
});

请注意，ID不能重复，因此我将选择ID更改为类

的 DEMO

答案 1 :(得分：0)

我已经把你的小提琴放在这里，并做了一些修改和评论来解释

var clones = [];  //this will hold the state for options  selected so far

$(document).on('change', '.size-sml-select', function(e) {
    var selectval = $(this).val(); //shorthand for getting select value
    if (selectval == "delete") {
      //we want to update the state to reflect the option that was just removed
        $(this).find('option').each(function(){
          if($(this).attr('disabled') && $(this).val()!==""){ 
            clones.splice(clones.indexOf($(this).val()), 1);
          }
        });
        //remove actual html
        $(this).parents(".appendSML").remove();
    } else if (selectval !== "") {
      //if this option hasn't been chosen before
      if(clones.indexOf(selectval)<0){
        //add to the state array
        clones.push(selectval);
        var count = $('.appendSML').length;
        var clone = $('.appendSML:first').clone();
        var selectClone = clone.find('select');
        //update the disabled status of the just selected option
        selectClone.find('option').each(function(){
          if(this.value===selectval){
            console.log(this.value);
            $(this).attr("disabled","true");
          }
        });
        //add the delete option
        selectClone.append('<option value="delete">Delete</option>');
        $('.appendSMLModel').append(clone);
      }
    }
});
div, input, textarea, button, select, label, a {
    -webkit-tap-highlight-color: transparent;
}
.row-fluid {
    position: relative;
    margin-left: -12px;
}
.row-fluid:before, .row-fluid:after {
    display: table;
    content: "";
    line-height: 0;
}
.row-fluid>[class*="span"], span7per, span10per {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    float: left;
    min-height: 1px;
    padding-left: 12px;
}
.row-fluid>.span16 {
    width: 100%;
}
.row-fluid>.span3 {
    width: 18.75%;
}
label {
    display: block;
    text-align: left;
    font-weight: 500;
    cursor: default;
    margin-bottom: 5px;
    font-size: 11px;
    line-height: 16px;
    text-transform: capitalize;
}
.checkout-container label {
    display: inline-block;
}
select {
    position: relative;
    width: 100%;
    display: block;
    font-weight: 400;
    padding-left: 6px;
    padding-right: 0;
    text-indent: 0.01px;
    text-overflow: '';
    background: transparent;
    border: 1px solid #777;
    outline: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 30px;
    background: transparent url(https://www.ssense.com/images/dropdow-arrow-2xmargin-right.png) center right no-repeat;
    background-size: 16px;
    cursor: pointer;
    text-transform: none;
}
select, input {
    color: inherit;
    font: inherit;
    margin: 0;
}
form input, form select, .form input, .form select {
    margin-bottom: 20px;
    width: 100%;
}
:invalid {
    box-shadow: none;
}
.row-fluid>.span5 {
    width: 31.25%;
}
input {
    height: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #777;
    outline: 0;
    min-height: 30px;
    padding: 0 6px;
    background: transparent;
    vertical-align: top;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="AllSize SizeSML hidden2">
        <div class="row-fluid appendSMLModel">
            <div class="row-fluid span16 appendSML" for="0">
                <div class="span3 mobileFullPhone2">
                    <label>Size</label>
                    <div class="select-container">
                        <select name="size_SML_select" id="SizeUniSML" validate="" required="" class="size-sml-select">
                            <option value="" selected="" disabled="">Select</option>
                            <option value="small">Small</option>
                            <option value="medium">Medium</option>
                            <option value="large">Large</option>
                        </select>
                    </div>
                </div>
                <div class="span5 mobileFullPhone2">
                    <label>Stock</label>
                    <input type="text" autocomplete="off" name="size_SML_input" value="" validate="" required="">
                </div>
            </div>
        </div>
    </div>

答案 2 :(得分：0)

你会发现它更简单：

  • 在开始时无条件地创建克隆。
  • 显示/隐藏克隆而不是追加/删除。

此外，原始和克隆的<select>元素的必需行为是如此不同，以至于它们保证自己的更改处理程序。普通人只会使问题复杂化。

这样的事情应该这样做：

jQuery(function($) {
    var $originalSelect = $('#SizeUniSML');
    var $originalWrapper = $originalSelect.closest('.appendSML');

    // clone the wrapper unconditionally, and append, ...
    var $clonedWrapper = $originalWrapper.clone().insertAfter($originalWrapper).hide();
    // ... and append a "delete" option to the cloned select element
    var $clonedSelect = $clonedWrapper.find('select').prop('id', '').append('<option value="delete">Delete</option>');

    // attach 'change' handler to $originalSelect
    $originalSelect.on('change', function(e) {
        if ($(this).val() !== '') {
            $clonedWrapper.show().find('select').val('')
            .find('option').prop('disabled', false) // enable all options in clone
            .eq(this.selectedIndex).prop('disabled', true); // disable corresponding option in clone
            // (placeholder) do other stuff with selectedVal?
        }
    });

    // attach 'change' handler to $clonedSelect
    $clonedSelect.on('change', function(e) {
        switch($(this).val()) {
            case '': 
                // do nothing
            break;
            case 'delete':
                $originalSelect.val(''); // presumably?
                $clonedWrapper.hide();
            break;
            default: 
                // (placeholder) do other stuff with selectedVal?
        }
    });
});

<强> Demo

如果你有＆＃34;其他东西＆＃34;这两个处理程序都很常见，然后编写一个命名函数并从占位符中调用它。

相关问题
最新问题