Question

我有以下代码

<!DOCTYPE html>
<html>
<body>

<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
  <select name="cars">
    <option value="Volvo/text.html">Volvo</option>
    <option value="Saab/text.html">Saab</option>
    <option value="Fiat/text.html">Fiat</option>
    <option value="Audi/text.html">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

<table>

</table>


</body>
</html>

我想做的是基于我的选择，获取说Audi / text.html的html文本并将其插入到表格标签之间。所以看起来像...

<table>

<tr>
  <td> Some Audi text </td>
  <td> Some more text</td>
</tr>

</table>

很显然，当选择更改时，内容也会更改。如果有人知道使用JavaScript的更好方法，那就更好了。

谢谢！

Answer 1

没有一点JS就不可能做到这一点，因为它需要侦听事件并相应地更改文本。根据我对问题的理解，您希望每次选择一个新选项时，该选择都将替换表中的第一个td元素。考虑到这一点，这样的事情应该起作用。

我首先将一个ID添加到您的选择框和第一个td元素中，以便我们可以轻松地将它们都定位。然后，我将添加一个事件侦听器，以便每次选择更改时，文本都会相应地更改。

<!DOCTYPE html>
<html>
    <body>
        <h2>The select Element</h2>
        <p>The select element defines a drop-down list:</p>
        <form action="/action_page.php">
            <select id="cars" name="cars">
                <option value="Volvo/text.html">Volvo</option>
                <option value="Saab/text.html">Saab</option>
                <option value="Fiat/text.html">Fiat</option>
                <option value="Audi/text.html">Audi</option>
            </select>
            <br><br>
            <input type="submit">
        </form>
        <table>
            <tr>
                <td id="switcheroo"></td>
            </tr>
        </table>
        <script>
        (function() {
            var tdEl = document.getElementById('switcheroo'),
            select = document.getElementById('cars');
            select.addEventListener('change', function() {
                tdEl.innerHTML = this.value;
            });
        })();
        </script>
    </body>
</html>

让我知道这是否满足您的要求。.现在，我在重新阅读您的问题，它可能与您要查找的内容不完全相同，但希望它已经很接近并且可以为您找到正确的解决方案

Answer 2

我宁愿建议您将jQuery与一些ajax调用一起使用

$(document).ready(function(){
  // On Page Load this is going to be executed
  $.ajax({
    url: "Volbo/text.html" ,
  }).always(function(data) {
    $("#myTable").html(data);
  });
  // on Select change this is going to be executed
  $("#drop").change(function () {
    $.ajax({
      url: this.value,
    }).always(function(data) {
      $("#myTable").html(data);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="drop" name="cars">
        <option value="Volvo/text.html">Volvo</option>
        <option value="Saab/text.html">Saab</option>
        <option value="Fiat/text.html">Fiat</option>
        <option value="Audi/text.html">Audi</option>
      </select>

    <table id="myTable">
    
    </table>

使用javascript

2 个答案: