javascript - PHP/MYSQL 中自动更改选项值

Question

$MethodLocationFrom =mysql_query("
    SELECT DISTINCT Location_From AS 'locationFrom'
    FROM trip 
");
    echo "<form action='confirmation.php' method='post'>";
    echo "<select class = 'LocationFrom' size='1'  name='locationFrom' id='locationFrom'>";
    while($check = mysql_fetch_array($MethodLocationFrom))
{
echo "<option value='" . $check['locationFrom'] . "'>" . $check['locationFrom'] . "</option>";
}
echo"</select>";

$MethodLocationTo =mysql_query("
    SELECT DISTINCT Location_To AS 'locationTo'
    FROM trip
");
    echo "<select class = 'LocationTo' size='1' size='1'  name='locationTo' id='locationTo'>";
    while($check = mysql_fetch_array($MethodLocationTo))
{
    echo "<option value='" . $check['locationTo'] . "'>" . $check['locationTo'] . "</option>";
}
echo"</select>";

大家好!我正在制作一个类车预订系统，我在使用选项框时遇到了问题，我想要做的是，当我从“位置”(第一个选项框)中选择一个地点时，该位置将自动从我想要的位置删除去(第二个框)我该怎么做？

Answer 1

好吧，让我尝试一下，但有个人的想法

假设迭代结果为(为了简洁而简化)

<select id="locationFrom">
  ...
  <option value="$from">($from)</option>
</select>
<select id="locationTo">
  ...
  <option value="$to">($to)</option>
</select>

我假设每个选项集的值是相同的。

让我们开始接触 JavaScript。请注意，本文很长并且没有评论，请检查它、测试它，如果发现错误请给我反馈。

// script.js
(function(){
  var selectFrom, selectTo, unsetChild, nextSibling,
    onSelect, removeOption, recoverOption,
    loadWin, unloadWin;
  onSelect = function () {
    var idx = this.selectedIndex;
    if (idx !== -1) {
      if (unsetChild) {recoverOption();}
      removeOption(this.options[idx].value);
    }
  };
  removeOption = function (value) {
    unsetChild = selectTo.querySelector('[value="'+value+'"]');
    nextSibling = unsetChild.nextSibling;
    selectTo.removeChild(unsetChild);
  };
  recoverOption = function () {
    nextSibling
      ? selectTo.insertBefore(unsetChild,nextSibling)
      : selectTo.appendChild(unsetChild);
    nextSibling = unsetChild = null;
  };
  loadWin = function () {
    selectFrom = document.getElementById('locationFrom');
    selectTo = document.getElementById('locationTo');
    selectFrom.addEventListener('change',onSelect,false);
  };
  unloadWin = function () {
    selectFrom.removeEventListener('change',onSelect,false);
    selectFrom = selectTo = nextSibling = unsetChild = null;
  };
  window.addEventListener('load',loadWin,false);
  window.addEventListener('unload',unloadWin,false);
});