Question

当用户在选择框中选择一个选项时，将触发一个新框。

但是假定用户改变了看法并选择了一个新选项，则以前的选择框不会消失。

如何使“错误”的选择框-首选-消失。我有一个working example at codepen来说明问题。

当用户使用“选择选项”做出决定时，他将调用hotelchecker函数，以便第二个选择框出现“基于先前选择的选项”。 当他重新考虑自己的选择并从“选择选项”中再次选择时，如何防止我有多个第二选择框？

这是我的HTML：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://maven.apache.org/POM/4.0.0"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.shashank</groupId>
    <artifactId>FlinkDruid</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>FlinkDruid</name>
    <description>Flink Druid Connection</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.flink/flink-core -->
        <dependency>
            <groupId>org.apache.flink</groupId>
            <artifactId>flink-core</artifactId>
            <version>1.9.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.flink/flink-streaming-java -->
        <dependency>
            <groupId>org.apache.flink</groupId>
            <artifactId>flink-streaming-java_2.12</artifactId>
            <version>1.9.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.flink/flink-java -->
        <dependency>
            <groupId>org.apache.flink</groupId>
            <artifactId>flink-java</artifactId>
            <version>1.9.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.flink/flink-clients -->
        <dependency>
            <groupId>org.apache.flink</groupId>
            <artifactId>flink-clients_2.12</artifactId>
            <version>1.9.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.apache.flink/flink-jdbc -->
        <dependency>
            <groupId>org.apache.flink</groupId>
            <artifactId>flink-jdbc_2.12</artifactId>
            <version>1.8.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.calcite.avatica/avatica-core -->
        <dependency>
            <groupId>org.apache.calcite.avatica</groupId>
            <artifactId>avatica-core</artifactId>
            <version>1.15.0</version>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

这是我的JS：

<div id="selectbox">
        <select class="selectstyled" id="change">
        <option value="0">Choose Option</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>

              </select>
    </div>

我考虑过运行querySelectorAll“ [let changeUse = document.getElementById("change"); changeUse.addEventListener("change", hotelchecker); function hotelchecker() { if (changeUse.value == 1) { document.getElementById("selectbox").insertAdjacentHTML("afterend", ` <div id = "selectbox"> <select class = "selectstyled" id = "changeHotel"> <option value="0">Option based on previuos choice</option> <option value="1">Further choice 1</option> <option value="2">Further choice 2</option> <option value="3">Further choice 3</option> </select> </div> `) } if (changeUse.value == 2) { document.getElementById("selectbox").insertAdjacentHTML("afterend", ` <div id = "selectbox"> <select class = "selectstyled" id = "changeHotel"> <option value="0">Option based on previuos choice</option> <option value="1">Further choice 1</option> <option value="2">Further choice 2</option> <option value="3">Further choice 3</option> </select> </div> `) } };][1]”，如果是changeHotel则删除现有元素，但是我总是会得到“ undefined”。

Answer 1

您需要添加具有唯一ID的选择框。

然后在发生更改事件时清除您的selectedbox元素。

尝试以下解决方案。

let changeUse = document.getElementById("change");

changeUse.addEventListener("change", hotelchecker);

function hotelchecker() {
 
var element =  document.getElementById('selectbox1');
if (typeof(element) != 'undefined' && element != null)
{
    element.parentNode.removeChild(element);
}
  
  var element2 =  document.getElementById('selectbox2');
if (typeof(element2) != 'undefined' && element2 != null)
{
    element2.parentNode.removeChild(element2);
}
  

    if (changeUse.value == 1) {
        document.getElementById("selectbox").insertAdjacentHTML("afterend", `
        <div id = "selectbox1">
        <select class = "selectstyled"
        id = "changeHotel">
        <option value="0">Option based on previuos choice</option>
        <option value="1">Further choice 1</option>
        <option value="2">Further choice 2</option>
        <option value="3">Further choice 3</option>
        </select>
        </div>
    `)
           }
    if (changeUse.value == 2) {
    document.getElementById("selectbox").insertAdjacentHTML("afterend", `
        <div id = "selectbox2">
        <select class = "selectstyled"
        id = "changeHotel">
        <option value="0">¿En qué Hotel?</option>
        <option value="4">Hotel 1 auf  Granni</option>
        <option value="5">Hotel 2 auf  Granni</option>
        <option value="6">Hotel 3 auf Granni</option>
        </select>
        </div>
       
    `)
    }
};

<div id="selectbox">
        <select class="selectstyled" id="change">
        <option value="0">Choose Option</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
     
              </select>
    </div>

Answer 2

过多的硬编码，我建议以优美的方式完成，为第二个选项创建元素

<div id="selectbox">
  <select class="selectstyled" id="change">
        <option value="0">Choose Option</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
  </select>

  <select class="selectstyled" id = "secondSelection"></select>
</div>

脚本是

let changeUse = document.getElementById("change");
changeUse.addEventListener("change", hotelchecker);

const optionsSets = {
  0: [],
  1: [
    { value: '0', text: 'Option based on previuos choice'},
    { value: '1', text: 'Further choice 1'},
    { value: '2', text: 'Further choice 2'},
  ],
  2: [
    { value: '0', text: '¿En qué Hotel?'},
    { value: '4', text: 'Hotel 1 auf  Granni'},
    { value: '5', text: 'Hotel 2 auf  Granni'},
  ],
}

function hotelchecker() {
  const secondSelection = document.getElementById("secondSelection")
  secondSelection.innerHTML = 
      optionsSets[changeUse.value].map(({ value, text }) =>  
        `<option value="${value}">${text}</option>`
      ).join('')

  secondSelection.style.display = +changeUse.value ? 'block' : 'none' 
}

hotelchecker()

多次单击选择框时，删除第一个元素

2 个答案: