更改基于用户选择

我想要做的是有两组问题，并根据我的第一个问题让他们改变。更改基于用户选择

如果您是业主，我有一系列不同的问题，那么如果您不是业主。我可以做到这一点，但以一种非常糟糕的方式，在我看来......用replacewith ...我应该有一个div让它看不见，并让它进来，如果它是选定的？如果我必须按照现在的方式来做，我希望首先有答案框，如果可以的话，而不是在文本的末尾？提前致谢！我已经包括小提琴

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

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

来源

2013-06-27 philly

嘿，'shift'键坏了？ – Hamish

大声笑没有它的作品。我有一首曲目，并且正在开展这项工作。如果我认为大写会帮助我得到答案，我很乐意会有大声笑 – philly

如果问题很容易阅读，格式良好等等，您*更有可能得到很好的答案= D – Hamish

附加一个“变”功能来选择框，检查该功能所选择的选项的值，并使用值来选择，并显示正确的组的问题。

（更新实际工作这段时间），点击它 - >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'); 
});

来源

2013-06-27 23:45:49 relic

应该真的校对我自己的代码在发帖之前有一点点... – relic

哈哈我有几乎完全相同的答案！ – jonosma

+1好的答案......我唯一要说的是HTML规范在添加由常规html属性处理的自定义数据属性时会皱眉头 - 即数据val应该是“值”。 Gez – MyBO

------ 编辑 ------

请参阅捣鼓工作代码：http://jsfiddle.net/q7qGs/embedded/result/

------ //编辑 ------

它是一个好主意，让你选择一个ID和/或名称属性，您可以使用该属性轻松定位该字段的所选选项值或文本中的原始javascript或jQuery中的函数（回调函数）。你也可以用相同的方式将每个元素或元素组包装在div中。

就个人而言，我会使用jQuery来做到这一点，因为其更快地编写和很好的跨浏览器兼容的，但是，我离题...

从本质上讲，在jQuery的，如果你有一个像定义的选择字段：

<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的更多信息，以及如何使用它，请参阅除了forum post/tutorial有条件地显示/隐藏基于另一个值的表单元素。

希望它能帮助，

盖孜

来源

2013-06-28 00:08:34 MyBO

不是我的一天...我确定它只是我..但不能让它工作http://jsfiddle.net/philyphil/LjxGB/2/embedded/result/ – philly

@ relic180 np非常感谢你我非常感激！感谢所有其他人以及你们永远是最棒的！ – philly

@philly - 请看我更新的答案------编辑------ – MyBO

更改基于用户选择

回答

相关问题