jQuery無法根據選擇選項顯示/隱藏元素

我正在構建一個wordpress小部件，它允許用戶在定製器預覽中構建一個簡單的表單。我的形式的助洗劑jQuery無法根據選擇選項顯示/隱藏元素

部分是有一個與列出的幾個形式元素（文本，文本區域，選擇複選框...等）下拉選擇輸入，如果用戶選擇任一select，checkbox或radio作爲一種形式元件，那麼一個包含textarea的div可以通過jQuery顯示用戶可以列出這些元素的選項。

很明顯，用戶可以添加無限元素，所以我動態地爲每個下拉菜單和每個容器div分配一個id，以便我可以爲用戶添加的每個元素顯示/隱藏它們。

這是我簡化的html標記，顯示了我所擁有的精髓。您將看到用戶可以選擇表單元素的下拉列表，以及包含文本區域的div。由於每個下拉涉及一個textarea，我加jQuery代碼以上他們既可以顯示/隱藏textarea的容器：

<script> 
    jQuery(document).ready(function($) { 
    var arr = ['select', 'checkbox', 'radio']; 
    var thisForm = '#select-input-118 select.input_type'; 

    function showHideSelect() { 
     var val = $(thisForm + ' option:selected').val(); 
     var selectOptions = $('#select-options-118') 

     if (arr.indexOf(val) >= 0) { 
     selectOptions.show(); 
     } else { 
     selectOptions.hide(); 
     } 
    } 

    jQuery(document).ready(function($) { 
     showHideSelect(); 

     $(thisForm).change(function() { 
     showHideSelect(); 
     }); 
    }); 

    }); 

</script> 
<p id="form_builder_input_type select-input-118" class="layers-form-item layers-column layers-span-9"> 
    <label for="widget-layers-widget-form_builder-3-input_type">Input Type</label> 
    <select size="1" id="widget-layers-widget-form_builder-3-form_builders-118-input_type" name="widget-layers-widget-form_builder[3][form_builders][118][input_type]" placeholder="Select a form item" class="input_type"> 
    <option value="">Select a form item</option> 
    <option value="text" selected="selected"> 
     Text </option> 
    <option value="email"> 
     Email </option> 
    <option value="textarea"> 
     Text Area </option> 
    <option value="select"> 
     Drop Down Menu </option> 
    <option value="checkbox"> 
     Checkbox </option> 
    <option value="radio"> 
     Radio Buttons </option> 
    </select> 
</p> 

<div id="select-options-118"> 
    <p id="select_options" class="layers-form-item"> 
    <label for="widget-layers-widget-form_builder-3-form_builders-118-select_options">Select Options</label> 
    </p> 
    <p style="background:#f5f5f5; padding:10px 20px; margin-bottom:20px;">One option per line</p> 
    <textarea id="widget-layers-widget-form_builder-3-form_builders-118-select_options" name="widget-layers-widget-form_builder[3][form_builders][118][select_options]" placeholder="Add your options here" class="layers-text"></textarea> 
    <p></p> 
</div>

由於用戶可以創建表格元素的數量不受限制，該ID是動態插入到元件並通過PHP進入jQuery代碼 - 我剛剛從輸出的html這裏拿了一個片段。 You can see a jsfiddle also here

這裏的想法是，對於每個下拉菜單，如果用戶選擇「選擇」，「複選框」或「無線電」。包含選項textarea的div在所有其他情況下顯示它隱藏。

我有2個問題： 1）我jQuery代碼不工作，我不明白爲什麼 2）有我的代碼這一點，而不是讓jQuery的的片段爲每個實例更好的辦法下拉/ textarea？即我可以寫一個全球性的jQuery代碼，將這個函數添加到所有實例？

來源

2016-03-03 Sam Skirrow

的jQuery在的jsfiddle https://jsfiddle.net/46stb05y/似乎有'。就緒（）''一個。就緒（）'處理程序裏面？ '.ready（）'處理程序中的'.ready（）'不應該被調用 – guest271314

@ guest271314這是多餘的，但也是無害的 – Barmar

有人注意到@ guest271314 - 我在這裏推薦了我的小提琴上的腳本：https：// jsfiddle.net/46stb05y/1/但仍然沒有解決問題 –

問題是您的更改事件是在窗體上，而不是元素。如果您將thisform設置爲'#widget-layers-widget-form_builder-3-form_builders-118-input_type'，則可以使用。

見https://jsfiddle.net/tghw/46stb05y/3/

來源

2016-03-03 04:22:08 tghw

jQuery無法根據選擇選項顯示/隱藏元素

回答

相關問題