跨浏览器兼容的Javascript或jQuery添加选择元素的选项

Cross Browser Compatible Javascript or jQuery to Add Choices to Select Element

本文关键字：添加 选择 元素 选项 jQuery Javascript 浏览器      更新时间：2023-09-26

我需要制作一个条件选择语句，该语句显示一组值IF，并且只有IF才能从另一个不等于0的选择语句中进行选择。我尝试了一堆使用display的基本Javascript：没有，但似乎找不到合适的组合来使其在所有浏览器之间交叉兼容。我需要使用jQuery吗？不幸的是，我只有一些基本的Javascript技能，所以我可能错过了一些基本的东西。

<h2>Station</h2>
<label for="station"></label>
<select name="station" id="station">
  <option value="0">None</option>
  <option value="1">Fire Station 1</option>
  <option value="2">Fire Station 2</option>
  <option value="3">Fire Station 3</option>
  <option value="4">Fire Station 4</option>
  <option value="5">Fire Station 5</option>
  <option value="6">Fire Station 6</option>
  <option value="7">Fire Station 7</option>
  <option value="8">Fire Station 8</option>
  <option value="9">Fire Station 9</option>
</select>
<br clear="all" />
<h2>Categories</h2>
<select name="category" id="category" style="width:160px;">
  <option value="">Choose One</option>
  <option value="11">Company Operations Alert</option>
  <option value="20">**Apparatus Issue</option>
  <option value="18">**Equipment Notice</option>
  <option value="19">**Station Announcement</option>
  <option value="21">**Station Maintainence</option>
</select>

是的，使用jQuery，您的js将类似于：

$('#station').on('change', function() {
    var seln = $(this).val();
    if (seln != 0) {
        $('#category').show();
    } else {
        $('#category').hide();
    }
});

如果您希望ajax请求加载第二个类别选择框：

$('#station').on('change', function() {
    var seln = $(this).val();
    if (seln != 0) {
        $.ajax({
            url: "ajax_url.php",
            type: "GET",
            data: "station=" + seln
        }).done(function(a) {
            $('#category').html(a).show();
        });
        $('#category').show();
    } else {
        $('#category').hide();
    }
});

您必须根据您的确切要求对上述代码进行一些更改。

相关文章：