当用户选择不同的选项时，HTML 选择的选项不会改变

Question

我在使用 HTML 创建的下拉列表时遇到了一些问题。填充选择下拉列表的选项来自我的数据库。我希望用户能够从下拉列表中选择地点类型（工作、学校、工作等），一旦选择，用户可以单击地图放置一个点或输入地址。
在用户从下拉列表中选择某些内容之前，地址的输入被禁用。我的问题是选定的下拉选项不会反映对用户的更改。它只是停留在作业选项上，但是当您单击地图时，会放置正确的标签标题。

HTML：

<select name="places" id="places" class="form-control" onchange="addPlace(this)">
        <option value="" selected disabled="">Choose one</option>
</select>

JavaScript：

function addPlace() {

    places = document.getElementById("places");
    place = places.options[places.selectedIndex].textContent;

    if (place.value === "") {
        alert("Alert Message");
        document.getElementById("address").disabled = true;
    } else {
        document.getElementById("address").disabled = false;
    }

    if (place !== "") {
        placeTogo.push(place);
        if (map1 === undefined) {
            loadAPI();
        }
    } else if (place == "Other") {
        placeId = places.selectedIndex + 1;

    } else {
        placeId = places.selectedIndex + 1;
        placeTogo.push(place);

        if (map1 === undefined) {
            loadAPI();
        }
    }

    for (var i = 0; i < places.length; i++) {
        places[i].selected = false;
    }

}

Answer 1

（很难确定这段代码究竟如何适合您的应用程序（以及它是否会按预期运行），但这是我解决上述具体问题的最佳方法

我的问题是选定的下拉选项不会向用户反映更改。它只是停留在作业选项上，但是当您单击地图时，会放置正确的标签标题。

1. addPlace 函数末尾的 for 循环导致此行为；当您的选择发生变化时，它会取消选择 每个 选项，并且浏览器除了选择第一个非禁用选项（“作业”）之外不知道该做什么。浏览器已经为您完成了更新每个选项的选定状态的工作；只需完全删除该 for 循环。

2. 不要使用textContent 来确定选择了哪个选项，而是使用value 属性（然后您可以稍后更改可见文本，而不必担心您的JS代码被破坏）。

3. 使用 HTML 属性禁用您的 input#address，因为在更改加载时不会触发更改事件（因此默认情况下您的地址是可编辑的）。

4. 您的变更处理程序中有几个部分似乎没有必要，但由于我手头没有您项目的全部背景，因此我犹豫是否要调整其他内容。例如，您的警报将永远不会运行，因为具有空字符串值的唯一选项被禁用（尽管最初被选中）。

/* Here are all of the things I guessed about
your implementation to get this example to work */

var placeTogo = [], // `push` made me guess this is an array
    map1 = {} // some object loaded by the api?
function loadAPI() {
    console.log('Tried to load API')
}

/* Here's where your original code begins, with edits */

function addPlace() {

    places = document.getElementById("places");
    place = places.options[places.selectedIndex].value;

    if (!place) {
        alert("Alert Message");
        document.getElementById("address").disabled = true;
    } else {
        document.getElementById("address").disabled = false;
    }

    if (place) {
        placeTogo.push(place);
        if (map1 === undefined) {
            loadAPI();
        }
    } else if (place == "Other") {
        placeId = places.selectedIndex + 1;

    } else {
        placeId = places.selectedIndex + 1;
        placeTogo.push(place);

        if (map1 === undefined) {
            loadAPI();
        }
    }
}

<select name="places" id="places" class="form-control" onchange="addPlace(this)">
    <option value="" selected disabled>Choose one</option>
    <option value="Jobs">Jobs</option>
    <option value="Work">Work</option>
    <option value="Other">Other</option>
</select>
<input id="address" disabled placeholder="123 Main Street"/>

Answer 2

一方面，我认为在 HTML 选项标签中它只是 'disabled' ，而不是 disabled=""。