Question

我只想在更改时捕获选项值。

我的代码在控制台中作为单独的行运行时有效，但即使在调用该函数后，变量listObj和eventValue仍为null。

window.onload = function() {
  document.getElementById("listSelector").addEventListener("change",
    findCarFunc);
  alert("Loaded");
}


function findCarFunc() {

  alert("you changed");

  var listObj = document.getElementById("listSelector");

  var eventValue = listObj.value;

}

<select id="listSelector">
  <option value="defaultManufactuer" selected = "selected">Manufacturer</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

现在函数返回一个字符串但是，我想在字符串中添加引号，因为我将使用它来标识相关的元素ID。

我可以实际做下面的尝试吗？我觉得我可能会困惑自己，

window.onload = function () {
    document.getElementById("listSelector").addEventListener("change", populateContainer);
    alert("Loaded");
}

function findCarFunc() {
    alert("you changed");
    var listObj = document.getElementById("listSelector").value;
    console.log(listObj);
}

function populateContainer() {
    alert("Container Event Loaded")
    //Div to append child on once the function has returned the 
    //element string. 
    var target = document.getElementById("target");
    //This is where I attempt to capture and manipulate the string by 
    //concatinating the quote marks onto the . 
    var str = "'"+findCarFunc()+"'";
    console.log(str);
}

Answer 1

您可以使用
获取所选选项的值 var eventValue = listObj.options[listObj.selectedIndex].value;

修改即可。我已经更新了我的答案，以满足您在评论中提到的需求。您的代码的问题在于您没有在findCarFunc（）中返回任何内容，这意味着默认情况下此函数将返回undefined。

＆＃13;

window.onload = function () {
    document.getElementById("listSelector").addEventListener("change", populateContainer);
    alert("Loaded");
}

function findCarFunc() {
    alert("you changed");
    var listObj = document.getElementById("listSelector").value;
  
    return listObj;
}

function populateContainer() {
    alert("Container Event Loaded")
    //Div to append child on once the function has returned the 
    //element string. 
    var target = document.getElementById("target");
    //This is where I attempt to capture and manipulate the string by 
    //concatinating the quote marks onto the . 
    var str = "'"+findCarFunc()+"'";
    console.log(str);
}

＆＃13;

<select id = "listSelector">
    <option value="defaultManufactuer" selected = "selected">Manufacturer</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

＆＃13;

Answer 2

window.onload = function () {
    document.getElementById("listSelector").addEventListener("change", findCarFunc);
    alert("Loaded");
}

function findCarFunc() {
    alert("you changed");

    var listObj = document.getElementById("listSelector").value;
    console.log(listObj);
}

<select id = "listSelector">
        <option value="defaultManufactuer" selected = "selected">Manufacturer</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

使用事件侦听器捕获变量

2 个答案: