Question

我有select框并添加更多button。当我点击添加更多button时，它会使用克隆创建另一个select。在第一个选择框select option框中的select值意味着应从下一个创建的select框中删除该值。同时在选择框中选择当前value框中显示的当前select的值。正在动态加载选择框值。

例如：

<select name="section" id="section_1" class="sectionType">
    <option value=" ">------</option>
    <option value="05">test1</option>
    <option value="06">test2</option>
    <option value="07">test3</option>
    <option value="08">test4</option>
    <option value="10">test5</option>
    <option value="11">test6</option>
    <option value="12">test7</option>
    <option value="13">test8</option>
    <option value="14">test9</option>
</select>

Answer 1

这是你要找的吗？

我建议您使用index()进行游戏和操作，这不会打扰您的动态值。

//Take a clone of last 
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last 
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
  //Finally append it
  $('body').append("<br/><br/>").append(cloneElement);
}

$('button').click(function(){
 
  //Take a clone of last 
  var cloneElement = $('.sectionType:last').clone();
  //Get index of option selected from last 
  var indexToRemove = $('.sectionType:last').find('option:selected').index();
  //Remove previously selected index
  cloneElement.find('option').eq(indexToRemove).remove();
  //Change the id of an element
  cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
  //If element has options
  if(cloneElement.find('option').length)
  {
    //Finally append it
    $('body').append("<br/><br/>").append(cloneElement);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
    <option value="">------</option>
    <option value="05">test1</option>
    <option value="06">test2</option>
    <option value="07">test3</option>
    <option value="08">test4</option>
    <option value="10">test5</option>
    <option value="11">test6</option>
    <option value="12">test7</option>
    <option value="13">test8</option>
    <option value="14">test9</option>
</select>
<button>Clone</button>

Answer 2

你可以这样试试。

$("#yourId").val(" ")//if your value has white spec else use like below line
$("#YourId").val("")//What ever you want to be selected, place your value in .val()

Answer 3

我希望这会对你有所帮助，如果你需要什么请问！

$("button").on("click", function() {
  $("#section_1")
  .clone()
  .attr("id", "section_2")
  .on("change", function() {
  var sec2Val = $(this).val();
    var delOption = $("#section_1 > option[value=" + sec2Val + "]").detach();
    optionHolder.push(delOption);
})
  .insertAfter($("#section_1"));
  $(this).attr("disabled", "disabled");
});

var optionHolder = [];
$("#section_1").on("change", function() {
  var sec1Val = $(this).val();
  if ($("#section_2")) {
    var delOption = $("#section_2 > option[value=" + sec1Val + "]").detach();
    optionHolder.push(delOption);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
    <option value=" ">------</option>
    <option value="05">test1</option>
    <option value="06">test2</option>
    <option value="07">test3</option>
    <option value="08">test4</option>
    <option value="10">test5</option>
    <option value="11">test6</option>
    <option value="12">test7</option>
    <option value="13">test8</option>
    <option value="14">test9</option>
</select>
<button>Add more</button>

使用jquery从选择框中删除选定的值，但是需要在选择框中显示当前选定的值？

3 个答案: