Question

我正在创建一个非常简单的工具，让我的小组选择会议地点。我遇到了一些问题，希望能收到一些建议和帮助。

我有一个下拉菜单，它允许用户选择会议地点，它将以文本显示。例如：

HTML

<select onchange="changed('list_1')" id="list_1" class="travel" />
    <option selected disabled>Select Place</option>
    <option value="New York">New York</option>
    <option value="Pennsylvania"> Pennsylvania</option>
    <option value="Boston">Boston</option>
    <option value="Washigton DC">Washigton DC</option>
</select>

的JavaScript

function changed(listId) {
    var list = document.getElementById(listId);
    document.getElementById("val_"+listId).innerHTML = list.value;
}
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value;

以下是我要找的输出：

您选择纽约作为会议地点。请确保在出席纽约会议之前与主管确认。

选择＆＃34;纽约＆＃34;时，在您选择＆＃34;值＆＃34;之间成功显示该值。作为会议地点。不幸的是因为document.getElementById只能使用一次，所以我无法获得相同的值＆＃34;纽约＆＃34;输出第二句。

我想知道你们中是否有人可以给我一个例子，或者告诉我如何从下拉列表中选择一次这个值，但价值会显示在多个区域？

非常感谢任何帮助

Answer 1

好吧，首先你错了只能使用document.getElementById一次，没有这样的限制，我不知道为什么你会认为有。

也就是说，获取值然后多次使用它的方法是将其存储在变量中。

Answer 2

修复开始标记，使其不自动关闭。同时更改onchange函数以this作为参数，引用自身。

<select onchange="changed(this)" id="list_1" class="travel">

重写changed函数以包含任何select作为参数。您可以使用其value属性来引用select元素的值。这个属性可以根据需要重复使用多次。如果您愿意，可将其存储在变量中。例如：

＆＃13;

function changed(select) {
  console.log('Visiting ' + select.value + '? Enjoy your trip to ' + select.value + '.');
}

＆＃13;

<select onchange="changed(this)" id="list_1" class="travel" >
    <option selected disabled>Select Place</option>
    <option value="New York">New York</option>
    <option value="Pennsylvania"> Pennsylvania</option>
    <option value="Boston">Boston</option>
    <option value="Washigton DC">Washigton DC</option>
</select>

＆＃13;

Answer 3

您没有使用元素值的限制，这是解决您问题的简单方法：

为要显示的文字使用简单模板：

function multiSelection(dimensions, tasks, mouseCoordinates) {
  var inDrag = [];
  var width = dimensions[0]; // 135
  var height = dimensions[1]; // 9
  var spaceHeight = dimensions[2]; // 1

  if (mouseCoordinates[0][1] > mouseCoordinates[1][1]) { // 42 > 13 = true
    var LineStart = mouseCoordinates[1][1]; // 13
    var LineEnd = mouseCoordinates[0][1]; // 42
  } else {
    var LineStart = mouseCoordinates[0][1]; // 42
    var LineEnd = mouseCoordinates[1][1]; // 13
  }

  var pos = 0
  for (var i = 0; i <= tasks.length; i++) { // 7 times
    pos = pos + height + spaceHeight // pos + 9 + 1
    if (LineStart < pos && pos < LineEnd) { 
        // 1st time: 13 < 10 && 10 < 42
        // 2nd time: 13 < 11 && 11 < 42
        // 3rd time: 13 < 12 && 12 < 42
        // 4th time: 13 < 13 is false, end of possibilities!
      inDrag.push(tasks[i]);
    }
  }
  return inDrag;
}

console.log(
  multiSelection(
    [135, 9, 1],
    ["Task 1", "Task 2", "Task 3", "Very Important Task", "Not So Important Task", "Yet Another Task", "The last task"],
    [ [132, 42], [35, 13] ]
  )
);

这假设您有一个像以下的HTML代码：

var textTemplate = 'You select {CITY} as the conference location. Please make sure you confirm with supervisor before you attend the conference in {CITY}.';
function changed(list_id){
    var cityName = document.getElementById(list_id).value;
    document.getElementById('outputTest').innerHTML = textTemplate.split('{CITY}').join(cityName);
}

JavaScript - 下拉菜单中的输出值不止一次？

3 个答案: