Question

我要做的是有两组问题，并根据我的第一个问题进行更改。

如果您是拥有者，如果您不是拥有者，我会提出不同的问题。我可以做到这一点，但在一个非常糟糕的方式，在我看来......替换...我应该有一个div让它看不见，并让它进来，如果它是选定的？如果我必须像现在这样做，我想先找到答案框，如果我可以而不是在文本的最后？提前致谢！我加了一个小提琴

<select>
      <option value=>owner</option>
      <option value=>non-owner</option>
</select>

http://jsfiddle.net/philyphil/LjxGB/embedded/result/

Answer 1

将“更改”功能附加到选择框，检查该功能中所选选项的值，并使用该值选择并显示正确的问题集。

（此次更新为实际工作）点击它 - ＆gt; jsFiddle

<select class="myOptions">
  <option data-val="" selected>Pick an option</option>
  <option data-val="owner">Owner</option>
  <option data-val="not-owner">Not Owner</option>
</select>

<div class="list owner">
    <p>abc</p>
  <!-- questions for owners -->
</div>

<div class="list not-owner">
    <p>xyz</p>
  <!-- questions for non-owners -->
</div>

一点点css ......

.list { display:none; }
.list.active { display:block }

和js ......

$('.myOptions').change(function(){
  $('.list').removeClass('active')
  .filter('.' + $('.myOptions').children('option:selected').attr('data-val'))
  .addClass('active');
});

Answer 2

------的修改 ------

请查看工作代码的小提琴：http://jsfiddle.net/q7qGs/embedded/result/

------的 //修改 ------

最好为您选择一个ID和/或名称属性，您可以使用该属性轻松定位字段中所选的选项值或文本 onchange 或 onclick 函数（回调）。您也可以用相同的方式将每个元素或元素组包装在div中。

就个人而言，我会使用jQuery来实现这一点，因为它更快地编写并且非常好地跨浏览器兼容但是，我离题了......

基本上，在jQuery中，如果你有一个select字段定义如下：

<select id="is_owner"> <option value="yes">owner</option> <option value="no">non-owner</option> </select>

您可以通过添加以下内容来检测其值的变化：

<script type="text/javascript"> (function($){ $('#is_owner').change(function(){ //set var = to the field's current value var value = $(this).val(); // Check value to see which field to show/hide if(value == 'yes'){ // Show other field /* YOUR CODE TO SHOW OTHER FIELD GOES HERE... target the field you want to show or hide for the yes condition as before and append .show() or .hide() respecively*/ } else if(value == 'no'){ // Show other field /* YOUR CODE TO SHOW OTHER FIELD GOES HERE... (see above*/ } }); })(jQuery); </script>

有关jQuery及其使用方法的更多信息，请参阅jQuery Website以及基于另一个值的有条件显示/隐藏表单元素的forum post/tutorial。

希望它有所帮助，

盖孜

根据用户选择进行更改

2 个答案: