Question

我有一个我正在处理的软件，允许您选择位置并在地图上显示。我想添加功能，通过按钮选择所有位置，并在地图上显示信息。

我是编码的新手，因此没有真正编写任何代码。我一直在网上搜索，但无济于事，这就是为什么我来这里问你可爱的人。

我们非常感谢您提供的任何建议或链接。

function checkAddAllName（mode）{

    var Name = document.getElementById('select_'+mode+'_ID').options[document.getElementById('select_'+mode+'_ID').selectedIndex].text;
    var Name = document.getElementById('select_'+mode+'_ID').options[document.getElementById('select_'+mode+'_ID').selectedIndex].value;

    var errorCount = 0;
    var Name = 0;
    var allStations = document.getElementsByTagName('input');

    for (var i=0; i<allNames.length; i++){
        if (allNames[i].id.substring(0,10) == 'StationNo_'){
            var splitID = allNames[i].id.split("_");
                if (splitID[1] == mode){
                    if (allNames[i].value == addedNameNo){
                        errorCount = 1;
                    }
                }
        }
    }

    if (errorCount == 0){
        addNAme(mode);
    } else {
        alert(addedName+' has already been added!');
    }

}

Answer 1

使用像jQuery这样的库最好这样做。一开始学习它需要一些时间，但它会为你的其余网络编程日付出代价。

假设您的位置是一个无序的复选框列表，如：

<ul id='listId'>
   <li><input type="checkbox value="London">London</li>
   <li><input type="checkbox value="Paris">Paris</li>
   <li><input type="checkbox value="Buenos Aires">Buenos Aires</li>
</ul>
<button id="selectAll">Select all</button>

在jQuery中你会做类似的事情：

$('button#selectAll').on("click",function(){
  $('ul#listId > li > input').prop('checked',true);
});

Answer 2

假设您的意思是普通的单一选择下拉：

<select id="ddlSelectCountry" onchange="SelectCountry(this);">
    <option value="">Please select..</option>
    <option value="USA">USA</option>
    <option value="France">France</option>
    <option value="Spain">Spain</option>
</select>

您可以使用此按钮自动选择所有非空项：

<button type="button" onclick="SelectAll('ddlSelectCountry');">Select All</button>

那个JavaScript就是：

function SelectAll(strDropDownId) {
    var oDDL = document.getElementById(strDropDownId);
    if (!oDDL) {
        alert("No such element: " + strDropDownId);
        return;
    }
    for (var i = 0; i < oDDL.options.length; i++) {
        if (oDDL.options[i].value.length > 0) {
            oDDL.selectedIndex = i;
            if (oDDL.change)
                oDDL.change();
            else if (oDDL.onchange)
                oDDL.onchange();
        }
    }
}

使用jQuery可以大大缩短代码并使代码更优雅，但这是您的选择。

Live test case

如何使用ASP / JavaScript / HTML从下拉列表中选择所有内容

2 个答案: