Question

我正在使用HTML。当从下拉列表中选择一个选项时，我必须在表单中显示一组问题。

我已经有了一个工作脚本。温我复制了它并根据我的要求编辑它不起作用。

var selVal = ele.options[ele.selectedIndex].value;

例如下面给出的是下拉列表。当选择选项1时，它应显示一组问题，当选择选项2时，它应显示一组差异。

<div id='q1'>
<b> Where is the caller from ? </b>

<select id="category" onChange="selDivision(this)">
    <option value="1">Store</option>
    <option value="2" >Office</option>
    </select>
<br />
<br />

显示所有表单内容而不是我的要求。

首先应该只显示下拉列表，一旦选择了一个选项，问题集必须显示在下面。

我使用简单的js脚本作为后端。

需要进一步协助。

用于隐藏和显示功能的部分代码

    $(document).ready(function(){

  //init();


  //$("#q1b").hide();
  $("#1q").hide();
  $("#2q").hide();
  $("#3q").hide();
  $("#4q").hide();
  $("#5q").hide();
  $("#6q").hide();
  $("#7q").hide();
  $("#8q").hide();
  $("#9q").hide();
  $("#10q").hide();

 $("#1a").hide();$("#1b").hide();$("#1c").hide();$("#1d").hide();$("#1e").hide();$("#1f").hide();$("#1g").hide();
 $("#2a").hide();$("#2b").hide();$("#2c").hide();$("#2d").hide();$("#2e").hide();$("#2f").hide();$("#2g").hide();

  setDisabled('q1',false);
  setDisabled('1q',false);
  setDisabled('2q',false);
  setDisabled('3q',false);
  setDisabled('4q',false);
  setDisabled('5q',false);
  setDisabled('6q',false);
  setDisabled('7q',false);
  setDisabled('8q',false);
  setDisabled('9q',false);
  setDisabled('10q',false);

  clear_form_elements(document.getElementById('test'));

});

function selDivision(ele)
{
    var selVal = ele.options[ele.selectedIndex].value;

    if(selVal == "1")
    {
        $('#1q').show(); setDisabled('q1',true);
        $("#1a").show();$("#1b").show();$("#1c").show();$("#1d").show();$("#1e").show();$("#1f").show();$("#1g").show();

    }
    if(selVal == "2" )
    {
        $('#2q').show(); setDisabled('q1',true);
        $("#2a").show();$("#2b").show();$("#2c").show();$("#2d").show();$("#2e").show();$("#2f").show();$("#2g").show();$("#2h").show();$("#2i").show();


    }
    Val=selVal;
}

</script>

</head>

q1 q2是下拉的问题

其他变量是选项下的问题。

Answer 1

试试这个

  <div id='questions' style="display:none">
   <div id='q1' style="display:none">
      <b> Question 1? </b>
      <b> a. ans1</b>
      <b> b. ans2</b>
   <b> c. ans3</b>
  </div>
  <div id='q2' style="display:none">
     <b> Question 2 ? </b>
     <b> a. ans1</b>
     <b> b. ans2</b>
     <b> c. ans3</b>
  </div>
  </div>
 <select id="category">
    <option value="0">-select-</option>
  <option value="1">Store</option>
  <option value="2" >Office</option>
   </select>
 <br />

<script>

$('#category').on("change",function() {
//Hide all Questions in first time
  $('#questions div').hide();

//get selected value
  var id=$('#category').val();
//display
  $('#questions').show();
  $('#q'+id).show();
});

 </script>

这里是工作示例http://jsfiddle.net/d1udL1cr/

在简单的html中使用Div和Hide选项

1 个答案: