我有<select>有一些选项。选择一个选项时，我希望它从$(".car").click(function()
{
var $id = $('#selector option:selected').val();
var $text = $('#selector option:selected').text();
$("#selector option[value='" + $id + "']").remove();
$('.cars').append('<div class="hey" id="' + $id + '">' + $text + '</div>');
$(".hey").click(function () {
$(this).remove();
var $value = $(this).attr('id');
var $text1 = $(this).text();
$('#selector').append('<option class="car" value="' + $value +'">' + $text1 +'</option>');
});
});
中消失并出现在div中。然后，当选项在div中时，如果我点击它，我希望它消失并返回到选择。
我有这段代码：
jQuery的：
<div id="myDiv">
<div class="cars">
</div>
</div>
<select id="selector">
<option class="car" value="alfaromeo">Alfa Romeo</option>
<option class="car" value="volvo">Volvo</option>
<option class="car" value="ford">Ford</option>
<option class="car" value="opel">Opel</option>
</select>
HTML：
line.split(",|;");
https://jsfiddle.net/jqvtyt7f/
但是存在一些巨大的问题。如果我一次选择多个汽车品牌，当点击品牌名称时，品牌名称将重复返回列表2,3或4次（取决于选择的品牌数量及其位置） 我也不能多次重新选择一个选项......
我是javascript的新手，我不知道发生了什么。任何帮助都将受到高度赞赏。
答案 0 :(得分：2)
我会使用选择列表的更改事件而不是其中的每个选项。
无需使用$（“＃selector选项[value ='”+ $ id +“']”）。remove（）;要删除的选择 - 你已经有了选择的选项，所以$（'＃selector选项：selected'）。remove（）;已经足够了。
另外，在从列表中删除之前，我会将项目添加到Div，以防万一将其添加到Div中时，您仍然会在列表中包含该项目...
最后，在添加之前，请检查列表中是否还没有该项目！
所以：
$("#selector").change(function() {
var $id = $('#selector option:selected').val();
var $text = $('#selector option:selected').text();
$('#selector option:selected').remove();
$('.cars').append('<div class="hey" id="' + $id + '">' + $text + '</div>');
$(".hey").click(function() {
var $value = $(this).attr('id');
var $text1 = $(this).text();
if ($("#selector option[value='" + $value + "']").val() === undefined) {
$('#selector').append('<option class="car" value="' + $value + '">' + $text1 + '</option>');
}
$(this).remove();
});
});
稍微清洁一点是：
var carDiv = document.getElementById('myDiv').querySelector('.cars');
$("#selector").change(function() {
var newDiv = document.createElement('div');
newDiv.id = $('#selector option:selected').val();
newDiv.innerHTML = $('#selector option:selected').text();
carDiv.appendChild(newDiv);
$(newDiv).click(function() {
putBackInList(this);
});
$('#selector option:selected').remove();
});
function putBackInList(item) {
if ($("#selector option[value='" + item.id + "']").val() === undefined) {
$('#selector').append(new Option(item.innerHTML, item.id));
}
$(item).remove();
}
这会为每个div元素添加一个click函数来调用单个函数来完成工作，而不是每次从列表中选择时都重复'hey'类的函数。
答案 1 :(得分：1)
从我能看到的内容中，你有很多问题，以及一些效率低下的问题。我认为您将点击事件添加到.hey次数太多了。每次单击选项时，您都会将其添加到.hey的所有元素。见：
$("#selector").click('.car', function()
{
var $id = $(this).val(), //$(this) represents the element clicked
$text = $(this).text();
$(this).remove(); //again, $(this) represents the element
$('.cars').append('<div class="hey" id="' + $id + '">' + $text + '</div>');
});
$("#myDiv").click('.hey', function () {
$(this).remove();
var $value = $(this).attr('id');
var $text1 = $(this).text();
$('#selector').append('<option class="car" value="' + $value +'">' + $text1 +'</option>');
});
这就是我的所作所为：
$(this)以提高效率。.hey的点击事件，并将其移至.car点击事件之外。[context][1]将它们添加到父母身上。由于在添加这些侦听器后将DOM元素添加到堆栈中，因此每次都必须重新添加它们。像我一样提供上下文，你不再需要担心这个。未经测试，但我感觉很好。
答案 2 :(得分：1)
试一试：
HTML
tilemap的jQuery
<div id="myDiv">
<div class="cars">
</div>
</div>
<select id="selector">
<option value="Select a car" class="default">Select a Car</option>
<option class="car" value="alfaromeo">Alfa Romeo</option>
<option class="car" value="volvo">Volvo</option>
<option class="car" value="ford">Ford</option>
<option class="car" value="opel">Opel</option>
</select>
这是一个工作小提琴：http://jsfiddle.net/1h36p5sg/
答案 3 :(得分：1)
除了语法糖和跨浏览器兼容性之外，没有真正的理由使用jQuery（尽管我认为大多数浏览器，包括IE 9及更高版本都应该使用纯JavaScript）。所以，虽然我有时间，但我认为我提供了一个简单的JS方法：
// pairing both functions within a parent object:
var options = {
// defining the name of the function:
'optionToDiv' : function () {
// this is the changed-<select> element passed
// automagically from addEventListner() (later):
var select = this,
// retrieving the selected <option> from the <select>,
// by looking at the options collection of the <select>
// and using the selectedIndex property of the
// HTMLSelectElement which gives the index of the
// selected <option> in the collection of options:
selectedOption = select.options[select.selectedIndex],
// creating a <span> element for use:
span = document.createElement('span'),
// retrieving the <div> element we're adding the
// <span> to:
div = document.querySelector('#myDiv > div.cars');
// setting the data-value property to be equal to
// the value property of the <option> (for moving the
// 'option' back into the <select>):
span.dataset.value = selectedOption.value;
// setting the text of the <span> to the <option>
// element's text:
span.textContent = selectedOption.text;
// if we already have a <span> (or rather 'child') present
// in the <div>:
if (div.children.length) {
// we append a new Option to the <select> element,
// here we use the new Option(text, value, selected)
// constructor; passing in the text of the <span> as,
// the <option> text, and the data-value of the span as
// the value:
select.appendChild(new Option(div.firstChild.textContent, div.firstChild.dataset.value));
// then we replace the current first-child of the <div>
// with the newly-created <span>:
div.replaceChild(span, div.firstChild)
}
else {
// otherwise we simply append the newly-created
// <span> element to the <div>:
div.appendChild(span);
}
// and then remove the selected <option> from the <select>:
selectedOption.parentNode.removeChild(selectedOption);
},
// name of the function that handles moving the <span>
// back to the <select> element (as an <option>):
'optionToSelect' : function () {
// finding the <select> element:
var select = document.getElementById('selector');
// as above, appending a newly-created <option> element
// using the new Option(text, value, selected) constructor:
select.appendChild(new Option(this.firstChild.textContent, this.firstChild.dataset.value));
// removing the first-child of the clicked <div>
// (which is 'this' in this function):
this.removeChild(this.firstChild);
}
};
// retrieving the <select> element:
var select = document.getElementById('selector'),
// retrieving the (relevant) <div> element:
div = document.querySelector('#myDiv > div.cars');
// binding the named-function as the change event-handler
// of the <select> element:
select.addEventListener('change', options.optionToDiv);
// binding the named-function as the click event-handler
// of the <div> element:
div.addEventListener('click', options.optionToSelect);
var options = {
'optionToDiv': function() {
var select = this,
selectedOption = select.options[select.selectedIndex],
span = document.createElement('span'),
div = document.querySelector('#myDiv > div.cars');
span.dataset.value = selectedOption.value;
span.textContent = selectedOption.text;
if (div.children.length) {
select.appendChild(new Option(div.firstChild.textContent, div.firstChild.dataset.value));
div.replaceChild(span, div.firstChild)
} else {
div.appendChild(span);
}
selectedOption.parentNode.removeChild(selectedOption);
},
'optionToSelect': function() {
var select = document.getElementById('selector');
select.appendChild(new Option(this.firstChild.textContent, this.firstChild.dataset.value));
this.removeChild(this.firstChild);
}
};
var select = document.getElementById('selector'),
div = document.querySelector('#myDiv > div.cars');
select.addEventListener('change', options.optionToDiv);
div.addEventListener('click', options.optionToSelect);.hey {
position: relative;
margin-right: 5px;
padding: 3px;
border-radius: 5px;
border: 1px solid #c3c3c3;
float: left;
cursor: pointer;
}<div id="myDiv">
<div class="cars"></div>
</div>
<select id="selector">
<option class="car" value="alfaromeo">Alfa Romeo</option>
<option class="car" value="volvo">Volvo</option>
<option class="car" value="ford">Ford</option>
<option class="car" value="opel">Opel</option>
</select>
JS Fiddle demo，用于实验和开发。
正如评论中所指出的，[下面由Steve Padmore撰写]，上述解决方案并非预期的功能：
...逻辑错误：[它]只会将第一个选择添加到div中，然后再添加。在为div添加选项的代码中，您要为select添加一个选项（然后删除原始选项）。您正在使用最新选择替换div中的任何项目 - 它应该添加它们......
要纠正这种不正确的逻辑，只需删除if (div.children.length) / else块;并将所有内容替换为else - div.replaceChild(span, div.firstChild)中的所有内容，其中包含以下代码（上述所有内容，因此未注释）：
var options = {
'optionToDiv': function () {
var select = this,
selectedOption = select.options[select.selectedIndex],
span = document.createElement('span'),
div = document.querySelector('#myDiv > div.cars');
span.dataset.value = selectedOption.value;
span.textContent = selectedOption.text;
// removed the surrounding if/else block,
// replacing it with this single line which
// always adds the selected <option> to the
// <div>:
div.appendChild(span);
selectedOption.parentNode.removeChild(selectedOption);
},
'optionToSelect': function () {
var select = document.getElementById('selector');
select.appendChild(new Option(this.firstChild.textContent, this.firstChild.dataset.value));
this.removeChild(this.firstChild);
}
};
var select = document.getElementById('selector'),
div = document.querySelector('#myDiv > div.cars');
select.addEventListener('change', options.optionToDiv);
div.addEventListener('click', options.optionToSelect);
var options = {
'optionToDiv': function() {
var select = this,
selectedOption = select.options[select.selectedIndex],
span = document.createElement('span'),
div = document.querySelector('#myDiv > div.cars');
span.dataset.value = selectedOption.value;
span.textContent = selectedOption.text;
div.appendChild(span);
selectedOption.parentNode.removeChild(selectedOption);
},
'optionToSelect': function() {
var select = document.getElementById('selector');
select.appendChild(new Option(this.firstChild.textContent, this.firstChild.dataset.value));
this.removeChild(this.firstChild);
}
};
var select = document.getElementById('selector'),
div = document.querySelector('#myDiv > div.cars');
select.addEventListener('change', options.optionToDiv);
div.addEventListener('click', options.optionToSelect);.hey {
position: relative;
margin-right: 5px;
padding: 3px;
border-radius: 5px;
border: 1px solid #c3c3c3;
float: left;
cursor: pointer;
}
div.cars span {
display: block;
}<div id="myDiv">
<div class="cars"></div>
</div>
<select id="selector">
<option class="car" value="alfaromeo">Alfa Romeo</option>
<option class="car" value="volvo">Volvo</option>
<option class="car" value="ford">Ford</option>
<option class="car" value="opel">Opel</option>
</select>
JS Fiddle demo，用于实验和开发。
当然，值得注意的是现有答案的另一个明显缺陷：因为<option>的移动基于change事件，这意味着第一个{{1} }}永远不会出现在列表中 - 因为选择<option>会将其从<option>中移除，因此第一个<select>会再次被选中，从而阻止<option>来自＆＃ 39;改变＆＃39;
因此，此更新使用一个简单的函数将<select> 'Please select'添加到<option>元素：
<select>
var options = {
// name of the 'initialisation' function:
'init': function () {
// getting the <select> element:
var select = document.getElementById('selector');
// inserting a new Option before the current firstChild
// of the <select> element, using the
// new Option(text, value, defaultSelected, selected)
// constructor:
select.insertBefore(new Option('Please select', '-1', true, true), select.firstChild);
},
'optionToDiv': function () {
var select = this,
selectedOption = select.options[select.selectedIndex],
span = document.createElement('span'),
div = document.querySelector('#myDiv > div.cars');
span.dataset.value = selectedOption.value;
span.textContent = selectedOption.text;
div.appendChild(span);
selectedOption.parentNode.removeChild(selectedOption);
},
'optionToSelect': function () {
var select = document.getElementById('selector');
select.appendChild(new Option(this.firstChild.textContent, this.firstChild.dataset.value));
this.removeChild(this.firstChild);
}
};
options.init();
var select = document.getElementById('selector'),
div = document.querySelector('#myDiv > div.cars');
select.addEventListener('change', options.optionToDiv);
div.addEventListener('click', options.optionToSelect);
var options = {
'init': function() {
var select = document.getElementById('selector');
select.insertBefore(new Option('Please select', '-1', true, true), select.firstChild);
},
'optionToDiv': function(e) {
var select = this,
selectedOption = select.options[select.selectedIndex],
span = document.createElement('span'),
div = document.querySelector('#myDiv > div.cars');
span.dataset.value = selectedOption.value;
span.textContent = selectedOption.text;
div.appendChild(span);
selectedOption.parentNode.removeChild(selectedOption);
},
'optionToSelect': function() {
var select = document.getElementById('selector');
select.appendChild(new Option(this.firstChild.textContent, this.firstChild.dataset.value));
this.removeChild(this.firstChild);
}
};
// calling the initialisation function:
options.init();
var select = document.getElementById('selector'),
div = document.querySelector('#myDiv > div.cars');
select.addEventListener('change', options.optionToDiv);
div.addEventListener('click', options.optionToSelect);.hey {
position: relative;
margin-right: 5px;
padding: 3px;
border-radius: 5px;
border: 1px solid #c3c3c3;
float: left;
cursor: pointer;
}
div.cars span {
display: block;
}
外部JS Fiddle demo，用于实验和开发。
参考文献：