Question

在html页面上，我有一个下拉列表和一个标题。我想更改标题并隐藏一些字段，具体取决于所选的选项：

这是html代码：

<h1 id ="title_form" style="margin-bottom: 25px;">Contact Form </h1> 

<select class="formInput" id="Contact_contactType" name="Contact_contactType" style="width: 200px;">
    <option value=""></option>

    <option value="1">Congress</option>

    <option value="2">Claimant</option>

    <option value="3">Claimant Representative</option>

    <option value="4">Contract Attorney</option>

    <option value="5">Employer Attorney</option>

    <option value="6">Employer</option>

</select>

这是我的javascript：

 var ddl = document.getElementById("Contact_claimantType");
 var selectedValue = ddl.options[ddl.selectedIndex].value;

 if (selectedValue == '0') {

     console.log("Picked Nothing");
     jQuery("#title_form").html = "Contact Form";

 }else if (selectedValue == '1') {

     console.log("Picked Congress");
     jQuery("#title_form").html = "Congress Contact Form";

}else if (selectedValue == '2') {

     console.log("Picked Claimant");
     jQuery("#title_form").html = "Claimant Contact Form";
     edeControl("ConepresentativeType");    
}

我也试过这个：

jQuery("#Contact_claimantType").change(function(){
   if(jQuery(this).val()=="0")
   {    
        console.log("Picked Nothing");
         jQuery("#title_form").html = "Conrm";

   }else if (jQuery(this).val()=="1"){

        console.log("Picked Congress");
         jQuery("#title_form").html = "Cong Form";


   }else if (jQuery(this).val()=="2"){

       console.log("Picked Claimant");
       jQuery("#title_form").html = "Claimant Contact Form";
       eControl("ContacntativeType");   


   }

});

我的代码目前没有做任何事情。它甚至没有向控制台写任何东西。无论如何，我可以使用jQuery或javascript完成我想要的东西。

Answer 1

我可能在这里缺少某些东西，但是你不能使用JS来简单地改变HTML元素的类，即你要隐藏的位你改为.classname-hidden并添加一个CSS规则到那个显示：无。就你想要改变内容的位而言，JS不应该真正用于生成内容，但你可以用html中的SPAN交换它，然后在CSS中使用tar来覆盖并使用Content：添加内容。当您想要更改所述模板时，再次将该类更改为具有不同内容的不同span类。

Answer 2

这很简单。首先，您需要在选择列表上设置事件侦听器。接下来，您需要检查选择列表的值，最后根据函数的值执行某些操作。

<h1 id ="title_form" style="margin-bottom: 25px;">Contact Form </h1> 

<select class="formInput" id="Contact_contactType" name="Contact_contactType" style="width: 200px;" onchange="myfunction(this)">
    <option value="0"></option>
    <option value="1">Congress</option>
    <option value="2">Claimant</option>
    <option value="3">Claimant Representative</option>
    <option value="4">Contract Attorney</option>
    <option value="5">Employer Attorney</option>
    <option value="6">Employer</option>
</select>


<script>
    function myfunction(element){
       var selectedValue = element.value;
       if (selectedValue == '0') {
          console.log("Picked Nothing");
          jQuery("#title_form").html = "Contact Form";
       }else if (selectedValue == '1') {
          console.log("Picked Congress");
          jQuery("#title_form").html = "Congress Contact Form";
       }else if (selectedValue == '2') {
          console.log("Picked Claimant");
          jQuery("#title_form").html = "Claimant Contact Form";
          etk.app.dataForm.hideControl("Contact_claimantRepresentativeType");    
       }
    }
</script>

Answer 3

我认为这段代码可以提供帮助

<h1 id ="title_form" style="margin-bottom: 25px;">Contact Form </h1> 

<select onchange="getValue(this);">
    <option value=""></option>

    <option value="1">Congress</option>

    <option value="2">Claimant</option>

    <option value="3">Claimant Representative</option>

    <option value="4">Contract Attorney</option>

    <option value="5">Employer Attorney</option>

    <option value="6">Employer</option>
</select>


<script type="text/javascript">
    function getValue(item) {
          if (item.value === "1")
            document.getElementById("title_form").innerHTML = "New text!";
    }
</script>

https://jsfiddle.net/DlanorJQ/e6d2cx8e/

Answer 4

这是一个最小的修复程序，允许您的脚本执行某些操作：

<script type="text/javascript">
    $(document).ready(function () {//document must be loaded before you can manage DOM
        //var ddl = document.getElementById("Contact_claimantType");//see above
            //var selectedValue = ddl.options[ddl.selectedIndex].value;//see above
        $('#Contact_contactType').change(function () {//Contact_claimantType not found make sure you use correct IDs
            var selectedValue = this.value;// now we have selected value
            //if (selectedValue == '0') {//you need "0" option which doesn't exist
            if (selectedValue == '') {

                console.log("Picked Nothing");
                //$("#title_form").html = "Contact Form";//jQuery: $ is common nickname for jQuery
                $("#title_form").html("Contact Form");//this way

            } else if (selectedValue == '1') {

                console.log("Picked Congress");
                //$("#title_form").html = "Congress Contact Form";
                $("#title_form").html("Congress Contact Form");

            } else if (selectedValue == '2') {

                console.log("Picked Claimant");
                jQuery("#title_form").html = "Claimant Contact Form";//guess what to do with it
                etk.app.dataForm.hideControl("Contact_claimantRepresentativeType");//nobody knows yet what is "etk"
            }
        });
    });
</script>

更改选定选项更改时的标题和隐藏文本字段

4 个答案: