更改基於用戶選擇

我想要做的是有兩組問題，並根據我的第一個問題讓他們改變。更改基於用戶選擇

如果您是業主，我有一系列不同的問題，那麼如果您不是業主。我可以做到這一點，但以一種非常糟糕的方式，在我看來......用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

更改基於用戶選擇

回答

相關問題