Question

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

HTML：

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;
    }

}

的JavaScript：

{{1}}

Answer 1

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

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

addPlace函数末尾的for循环导致此行为;它会在您的选择更改时取消选择每个选项，并且除了选择第一个非禁用选项（“作业”）之外，浏览器不知道该怎么做。浏览器已经为您完成了为每个选项更新所选状态的工作;只需完全删除for循环。
不使用textContent来确定选择了哪个选项，而是使用value属性（然后您可以在以后更改可见文本而不必担心JS代码中断）。 / p>
使用HTML属性禁用input#address，因为更改加载时不会触发更改事件（因此默认情况下您的地址可以编辑）。
您的变更处理程序中有一些部分似乎没有必要，但由于我没有手头项目的整个上下文，所以我不愿意进行其他调整。例如，您的警报将永远不会运行，因为禁用了唯一具有空字符串值的选项（尽管最初被选中）。

/* 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选项标签中它只是'禁用'，而不是禁用=“”。

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

2 个答案: