根据选择框显示/隐藏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

回答

相关问题