我想把一个外部html文件h12_load.html中的元素显示到一个 Select 列表中,如果其中一个被点击,它就会显示到一个名为divResults的div中.

当 Select /点击第一个选项时,它不会被添加到divResults中.

这就是我try 过的:

HTML JQuery:&

<select name="" id="SelectionList">
    <option value="" id="option1"></option>
    <option value="" id="option2"></option>
</select>
<div id="divResult"></div>
<script>
    $(document).ready(() => {
        let option1 = $('#option1').append().load('h12_load.html #content')
        let option2 = $('#option2').append().load('h12_load.html #meerContent')
        $('#SelectionList').on('change', function () {
            if ($('#option1').is(':selected')) {
                $('#divResult').append(option1)
            } if ($('#option2').is(':selected')) {
                $('#divResult').append(option2)
            }

        }

        )
    })
</script>

外部HTML文件:

<div id="content">
    <h2>Deze inhoud wordt geladen via $.load()</h2>
</div>
<div id="meerContent">
    <p>Lorem ipsum dolor sit....</p>
</div>

请帮忙,已经谢谢了!

推荐答案

当 Select /点击第一个选项时,它不会被添加到divResults中.

但第二个有吗?听起来你就是不能 Select 第一个选项tochange.毕竟,<select>强只有两个 Select .默认情况下将 Select 一个.所以 Select 那个(第一个)并不意味着 Select change.如果 Select 第二个元素,则该元素将移动到<div>,剩下<select>one选项,该选项已被选中.

因此,您已经创建了一个<select>,其中第一个选项始终处于选中状态,并且不能取消/重新选中.

添加一个空选项作为默认值:

<select name="" id="SelectionList">
  <option value=""></option>
  <option value="" id="option1"></option>
  <option value="" id="option2"></option>
</select>

然后,您可以 Select 其他选项之一. 当你这样做时,该选项被移动到<div>,空选项将再次成为默认值.

Html相关问答推荐

使用固定的HTML代码创建两个可向右滚动的行

子元素以元素X开始和结束的元素的XPath?

在css嵌套 Select 器中,尾随的`&;‘是什么意思?

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

如何在一张表中逃脱边境坍塌--崩溃?

为什么我的搜索栏会出现在WONG位置?

如何在用css使用网格视图时设置宽度?

如何在页面太短时使<;img&>缩小而不发生y溢出

我的Django应用程序中出现模板语法错误

SVG的动态CSS

可以';t使我的导航栏在HTML/CSS中正确对齐

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充?

带圆角帽的 CSS 部分边框

如何垂直对齐列表中的图像和文本?

如何在滚动行中显示一张图片和下一张图片的一半?

如何使用 CSS Flex 设计一个导航栏,其中一组项目左对齐而另一组项目右对齐?

右对齐 bootstrap 导航项而不是下拉菜单

CSS 斜角与 3 行对齐

沿文本对齐双引号

将固定/绝对伪元素放置在相对 div(具有滚动条)内,始终位于底部