Javascript 表单如果选择了选项，则显示自定义内容

我正在创建一个表单，其中有2个选择标记，每个标记有2个选项

它的工作方式是：

用户选择1选项1/选项2，然后选择另一个选项 A/备选案文B

根据他选择的内容，它将显示一个自定义段落

因此，如果用户选择选项1和选项B，将显示自定义内容。但如果他改变了选项，情况就会改变

但我不能让它工作。。。这是我的密码：

<form method="post">
    <p>I am a</p>
    <div class="youare">
        <select name="select" id="select">    
            <option value="">Select</option>
            <?php 
              $colors = array("Individual", "Business"); 
              foreach ($colors as $value) { ?>
            <option value="<?=$value?>"><?=$value?></option>
            <?php } ?>
        </select>
    </div>
    <p>My pathway is</p>
    <div class="pathway">
        <select name="select" id="select2">    
            <option value="">Select</option>
            <?php 
                $colors = array("Commercial Property", "Building Surveying"); 
                foreach ($colors as $value) { ?>
            <option value="<?=$value?>"><?=$value?></option>
            <?php } ?>
        </select>
    </div>
    <a href="" class="button">Select a bundle </a>

</form>



<section id="content">

  <script type="text/javascript">
    $(document).ready(function(){
      $("#select2").change(function(){
        selectVal = $(this).val();
        myarray = ["Individual", "Business"];
        mypath = ["Commercial Property", "Building Surveying"];
        if($.inArray(selectVal, myarray, mypath) !== -1){

          //If option 1 and option A: Show this
        }
        else if {
          //If option 1 and option B: Show this
        }
        else{
          //Do something
        }
      });
    });
  </script>

  <p class="icp">Content 1</p>
  <p class="ibs">Content 2</p>


</section>

---

您不需要将两个数组传递给$.inArray，它需要一个值来搜索，要搜索的数组和从中开始搜索的数组的索引可选，默认为零。如果未传递，请阅读$.inArray的文档，要修复代码，您需要将其更改为以下内容：

$("#select2").change(function(){
    const selectVal = $(this).val();
    const mypath = ["Commercial Property", "Building Surveying"];

if($.inArray(selectVal, mypath , 0) !== -1){ //Start the search at the beginning of the array
         //We have an option selected in drop down 2
         //Lets get drop down one's value
        const dropDown1Val = $('#select').val();

        if(selectVal === "Commercial Property" && dropDown1Val === "Individual"){
          //Show relevant text
        }
        else if (selectVal === "Commercial Property" && dropDown1Val === "Business") {
           //Show relevant text
        }
        else if (selectVal === "Building Surveying" && dropDown1Val === "Individual"){
           //Show relevant text
        }
        else if (selectVal === "Building Surveying" && dropDown1Val === "Business"){
            //Show relevant text
        }
        else{
          //both drop downs are not set, don't show any text??
        }
    }
}

试试这个代码

添加selectVal2=$选择'.val；在select2 onchange中单击

并使用两种不同的条件比较数组值，如

$.inArray(selectVal, mypath) !== -1 && $.inArray(selectVal2, myarray) !== -1

使用此if user select选项first和after second选择选项if match return success else not match return

$document.readyfunction{ $select2.changefunction{ 选择val=$this.val； selectVal2=$'select'.val； myarray=[个人，企业]； mypath=[商业地产、建筑测量]； 如果$.inArrayselectVal，mypath！=-1&$.inArrayselectVal2，myarray！=-1{ 控制台。记录“匹配成功”； //如果选项1和选项A：显示此选项 }否则{ 控制台。日志“不匹配”； //做点什么 } }; }; 我是一个

选择 个人 备选方案2 我的路径是

选择 商业地产 选项B

内容1

内容2

---

请看下面的答案。