根據選擇框顯示/隱藏div

這裏有很多關於此的答案，我試圖修改它們以適應它，但它不起作用。根據選擇框顯示/隱藏div

我做了的jsfiddle吧：http://jsfiddle.net/DrPz4/

選擇框代碼：

<div class="options"> 
    <h2>Available Options</h2> 
    <br /> 
    <div id="option-230" class="option"> 
     <span class="required">*</span> 
     <b>Size:</b><br /> 
     <select name="option[230]"> 
      <option value=""> --- Please Select --- </option> 
      <option value="28">Size 10      </option> 
      <option value="29">Size 12      </option> 
      <option value="30">Size 14      </option> 
      <option value="32">Size 16      </option> 
      <option value="31">Size 18      </option> 
      <option value="117">Made to Measure      </option> 
     </select> 
    </div> 
    <br /> 
    <div id="option-253" class="option"> 
     <b>Bust (cm):</b><br /> 
     <input type="text" name="option[253]" value="" class="input-text" /> 
    </div> 
    <br /> 
    <div id="option-254" class="option"> 
     <b>Waist (cm):</b><br /> 
     <input type="text" name="option[254]" value="" class="input-text" /> 
    </div> 
    <br /> 
    <div id="option-255" class="option"> 
     <b>Hips (cm):</b><br /> 
     <input type="text" name="option[255]" value="" class="input-text" /> 
    </div> 
    <br /> 
</div>

JS：

var MTM = jQuery('#option[230]'); 
var select = this.value; 
MTM.change(function() { 
    if ($(this).val() == '117') { 
     $('#option-253').show(); 
     } 
    else $('#option-253').hide(); 
});

感謝

來源

2013-09-29 scruft

什麼問題？你有什麼問題？不要只是在這裏轉儲代碼，並期望我們找出你的問題是什麼。 – j08691

'var MTM = jQuery（'[name =「option [230]」]'）;'是你的問題，修復選擇器。 http://jsfiddle.net/r7FvF/ – PSL

@ j08691對不起，我只是新來的，上次我問了一個問題，所有的解釋都被編輯出來，所以只剩下了代碼。我以爲我是這樣的意味着做到這一點。 – scruft

你的選擇是錯誤的。您使用的選擇器#option[230]將選擇編號爲option的元素和屬性230，如<select id="option" 230>..</select>。

在這種情況下，你可以使用的select元素作爲選擇的name下面給出...

var MTM = jQuery('select[name="option[230]"]'); 
MTM.change(function() { 
    $('#option-253').toggle(this.value == 117); 
    $('#option-254').toggle(this.value == 117); 
    $('#option-255').toggle(this.value == 117); 
}).change();

演示：Fiddle

來源

2013-09-29 02:54:12

謝謝，這幾乎完美！現在唯一的問題是，div在頁面加載時顯示。一旦你在下拉列表中選擇了一個選項，它們就會消失，但我需要它們在加載時隱藏。我試圖做的顯示：沒有CSS，但它沒有效果。 JS是否覆蓋它？ – scruft

完美運作！我現在想要做的是將其修改爲更通用（因爲每個產品的選擇器更改，「117」值也一樣）。我做了一個新的小提琴，試圖找出它，但this.html和this.innerhtml似乎並沒有工作。你介意看看嗎？ http://jsfiddle.net/e6hG5/3/ – scruft

您正在嘗試無選擇ID在jquery

，首先在選擇控制定義Id像如下

<select name="option[230]" id="option--230">

並如下使用：

jQuery('#option--230').change(function() { 
    if ($(this).val() == '117') { 
     $('#option-253').show(); 
     } 
    else $('#option-253').hide(); 
});

然後將其用作

jQuery('select[name="option[230]"]').change(function() { 
    if ($(this).val() == '117') { 
     $('#option-253').show(); 
     } 
    else $('#option-253').hide(); 
});

Demo

來源

2013-09-29 02:54:10 Amit

thx快速回復。名稱和ID由創建代碼的軟件（opencart）生成，所以我必須使用它在腳本中生成的內容。 – scruft

根據選擇框顯示/隱藏div

回答

相關問題