仅使用 Javascript 将具有唯一 id 属性的组合框(包括其所有选项)附加到?

我创建了一个带有选项的组合框(薄荷岛，长滩岛和宿务-麦克坦(。每次我单击该按钮时，都应该出现另一个具有相同选项的组合框。

function addActivity(){
var locationText = document.createTextNode("Location:")
document.getElementById("activity-div").appendChild(locationText);
var locationSelect = document.createElement("SELECT");
locationSelect.setAttribute("id","location-sel");
var locationOption1 = document.createElement("OPTION");
locationOption1.setAttribute("id","boholLoc")
var locationOption2 = document.createElement("OPTION");
locationOption2.setAttribute("id","boracayLoc")
var locationOption3 = document.createElement("OPTION");
locationOption3.setAttribute("id","mactanCebuLoc")
var locationOptionText1 = document.createTextNode("Bohol");
var locationOptionText2 = document.createTextNode("Boracay");
var locationOptionText3 = document.createTextNode("Cebu-Mactan");
document.getElementById("activity-div").appendChild(locationSelect);
document.getElementById("location-sel").appendChild(locationOption1);
document.getElementById("location-sel").appendChild(locationOption2);
document.getElementById("location-sel").appendChild(locationOption3);
document.getElementById("boholLoc").appendChild(locationOptionText1);
document.getElementById("boracayLoc").appendChild(locationOptionText2);
document.getElementById("mactanCebuLoc").appendChild(locationOptionText3);
}

<body>
<div id="activity-div">
Location:<br>
<select class="locationSel" name="location" id="location" value="">
<option value="bohol">Bohol</option>
<option value="boracay">Boracay</option>
<option value="cebu_mactan">Cebu-Mactan</option>
</select><br>
<span id="myText"></span>
<button onclick="addActivity()">Add</button><br>
</body>

事实证明，当我多次单击该按钮时，孩子将附加到同一个组合框上。我知道这与setAttribute("id","value")有关。如何让我的 id动态化？或者是否有更短的方法将整个组合框附加唯一ids？

使用jQuery，您可以轻松地将选项插入组合框中，如下所示

/**
function addActivity(){
insertACombo();
// here are the items that goes to the combo box
// {'id': 'bohol', 'value': 'Bohol'},{'id': 'boracay', 'value': 'Boracay'},{'id': 'cebu_mactan', 'value': 'Cebu-Mactan'}
var items = [];

var index = 0;
var values = $.map($('#location option'), function(ele) {
items.push({'id': ele.value + (++index), 'value': ele.text});
return ;
});

$('#combo2').append(function(){
var output = '<option>select</option>';
$.each(items, function (key, value) {
output += '<option value="' + value.id + '">' + value.value + '</option>';
});
return output;
});
//console.log(JSON.stringify(items));
}
function addItemsToTheSameCombo(){
// here are the items that goes to the combo box
// {'id': 'bohol', 'value': 'Bohol'},{'id': 'boracay', 'value': 'Boracay'},{'id': 'cebu_mactan', 'value': 'Cebu-Mactan'}
var items = [];

var index = 0;
var values = $.map($('#location option'), function(ele) {
items.push({'id': ele.value + (++index), 'value': ele.text});
return ;
});

$('#location').empty().append(function(){
var output = '<option>select</option>';
$.each(items, function (key, value) {
output += '<option value="' + value.id + '">' + value.value + '</option>';
});
return output;
});
//console.log(JSON.stringify(items));
}
function insertACombo(){
var sel = $('<select id="combo2">').appendTo('body');
}
*/
var i = 0;
function addNewComboWithSameItemsDiffIds(index){
var sel = $('<select id="combo' + i + '">').appendTo('body');

var items = [];

var index = 0;
var values = $.map($('#location option'), function(ele) {
items.push({'id': ele.value + (++index), 'value': ele.text});
return ;
});

$('#' + 'combo' + i).append(function(){
var output = '<option>select</option>';
$.each(items, function (key, value) {
output += '<option value="' + value.id + i + '">' + value.value + '</option>';
});
return output;
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="activity-div">
Location:<br>
<select class="locationSel" name="location" id="location" value="">
<option value="bohol">Bohol</option>
<option value="boracay">Boracay</option>
<option value="cebu_mactan">Cebu-Mactan</option>
</select><br>
<span id="myText"></span>
<!--<button onclick="addActivity()">Insert a new combo and append same items with different ids </button><br><br>
<button onclick="addItemsToTheSameCombo()">Insert items to the same combo with different ids</button><br><br> -->
<button onclick='addNewComboWithSameItemsDiffIds(++i)'>Insert Items for each click to a new combo with different ids'</button>
</body>

我刚刚找到了答案。这是仅使用javascript实现的。我使用了增加每次按钮点击的var counter。

var counter = 0;
function newLine(){
var newLine = document.createElement("BR");
document.getElementById("activity-div").appendChild(newLine);
}
function addActivity(){
//Creates the "Location" text and append it to DIV
var locationText = document.createTextNode("Location:")
document.getElementById("activity-div").appendChild(locationText);
newLine();
//Creates a SELECT element, sets its ID attribute and appends it to DIV
var locationSelect = document.createElement("SELECT");
locationSelect.setAttribute("id","location-sel"+ counter);
document.getElementById("activity-div").appendChild(locationSelect);
newLine();
//Creates an OPTION element, sets its ID attribute,appends it to SELECT, and puts TEXT label (BOHOL)
var locationOption1 = document.createElement("OPTION");
locationOption1.setAttribute("id","boholOption"+ counter);
document.getElementById("location-sel"+ counter).appendChild(locationOption1);
var locationOptionText1 = document.createTextNode("Bohol");
document.getElementById("boholOption"+ counter).appendChild(locationOptionText1);
//Creates an OPTION element, sets its ID attribute,appends it to SELECT, and puts TEXT label (BORACAY)
var locationOption2 = document.createElement("OPTION");
locationOption2.setAttribute("id","boracayOption"+ counter);
document.getElementById("location-sel"+ counter).appendChild(locationOption2);
var locationOptionText2 = document.createTextNode("Boracay");
document.getElementById("boracayOption"+ counter).appendChild(locationOptionText2);
//Creates an OPTION element, sets its ID attribute,appends it to SELECT, and puts TEXT label (CEBU-MACTAN)
var locationOption3 = document.createElement("OPTION");
locationOption3.setAttribute("id","cebuMactanOption"+ counter);
document.getElementById("location-sel"+ counter).appendChild(locationOption3);
var locationOptionText3 = document.createTextNode("Cebu-Mactan");
document.getElementById("cebuMactanOption"+ counter).appendChild(locationOptionText3);
counter++;
}

<body>
<div id="activity-div">

Location:<br>
<select class="locationSel" name="location" id="location" value="">
<option value="bohol">Bohol</option>
<option value="boracay">Boracay</option>
<option value="cebu_mactan" >Cebu-Mactan</option>
</select><br>
</div>

</body>
<button onclick="addActivity()">Add Activity</button><br>

相关内容

最新更新

热门标签：