I'；I’我想将div show/hide脚本更改为使用选择菜单而不是单选按钮 CSS javascript // HTML 颜色 选择一种颜色。。。 黑色 拉丝铝 黄铜 列数 一个 两个 字体 现代的 经典 酿造的 复古的

修改我的（失败的）更改，使其成为选择菜单

所以我希望现在能够用选择菜单而不是收音机组来打开和关闭文本区域。我确信这是我的语法，但除了特定的divs show之外，我似乎什么都做不了……索引对选择菜单的作用不一样吗

编辑： 我还希望它默认为第3个选择项，并在页面加载时显示3个相关文本字段

编辑2 在这里的实际实施中：

---

默认情况下会显示div，它看起来像这里的脚本：

$（'.namesColumn.IH_pINameRow'）.show（）是罪魁祸首…将块样式分配给div…当我删除它时，它会消失，但显然脚本也不再按预期工作。
您正在尝试获取选择菜单的索引。相反，您需要获得选择菜单的选定选项

<form action="https://im-here.foxycart.com/cart" method="post" accept-charset="utf-8">
<div class="center">
<!--Begin leftSide-->
<div class="submission">
<!--Begin hiddenInputs-->
<input type="hidden" name="name" value="I'm Here Notification Sign" />
<input type="hidden" name="price" value="10" />
<input type="hidden" id="productImage" name="image" value="http://2plygraphics.com/im-here/images/01.jpg"/>
<!--End hiddenInputs-->
<!--Begin colorSelection-->
<div class="left eighty center">
<label>Color</label>
<br>
<select id="colorSelect" name="Color" tabindex="1" required>
<option value="" selected="selected" disabled>Choose A Color...</option>
<option value="Black">Black</option>
<option value="DarkGrey">Brushed Aluminum</option>
<option value="DarkKhaki">Brass</option>
</select>
</div>
<!--End colorSelection-->
<br>
<!--Begin nameSelection
<div class="left eighty center">Number Of Names
<br>
<input type="radio" name="Names" value="1{p+100}" id="Names_1" class="NameRad1 trigger textBox1" tabindex="5" required />One
<br>
<input type="radio" name="Names" value="2{p+200}" id="Names_2" class="NameRad2 trigger textBox2" tabindex="6" />Two
<br>
<input type="radio" name="Names" value="3{p+300}" id="Names_3" class="NameRad3 trigger textBox3" tabindex="7" />Three
<br>
<input type="radio" name="Names" value="4{p+400}" id="Names_4" class="NameRad4 trigger textBox4" tabindex="8" />Four
<br>
</div>-->
<!--End nameSelection-->
<br>
<!--Begin columnSelection-->
<div class="left eighty center">Number Of Columns
<br>
<input type="radio" name="Columns" value="1" id="Columns_0" class="ColumnRad1 " tabindex="3" required />One
<br>
<input type="radio" name="Columns" value="2" id="Columns_1" class="ColumnRad2 " tabindex="4" />Two
<br>
</div>
<!--End columnSelection-->
<br>
<!--Begin fontSelection-->
<div class="left eighty center">
<label>Font</label>
<br>
<select id="fontSelect" name="Font" required>
<option value="Arial" selected="selected">Modern</option>
<option value="Times New Roman">Classic</option>
<option value="Impact">Vintage</option>
<option value="Verdana">Retro</option>
</select>
</div>
<!--End fontSelection-->
</div>
<!--End leftSide-->
<!--Begin rightSide-->
<div class="submission">
<div class="signCreatorDiv">
<div class="signMain"></div>
<div class="namesColumn">
<div class="NameImg content">
<div class="NameTxt1 right test">
<input class="test" type="text" name="name1" id="textBox1" value="" placeholder="Name 1" tabindex="9" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt2 right test ">
<input class="test" type="text" name="name2" id="textBox2" value="" placeholder="Name 2" tabindex="10" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt3 right test">
<input class="test" type="text" name="name3" id="textBox3" value="" placeholder="Name 3" tabindex="11" />
</div>
</div>
<div class="NameImg content">
<div class="NameTxt4 right test">
<input class="test" type="text" name="name4" id="textBox4" value="" placeholder="Name 4" tabindex="12" />
</div>
</div>
</div>
<div class="submitDiv">
<input type="submit" name="x:productsubmit" id="productsubmit" value="Add My Sign" class="submit" tabindex="13" />
</div>
</div>
</div>
<br>
<br>
<!--End rightSide-->
</div>
</form>

您可以使用Attila建议的代码，并将脚本中的最后一行更改为

var idx = $(this).children('option:selected').index();

要默认选择项目#3，请执行以下操作：

$('.namesColumn .NameImg.content:lt(' + idx + ') input:text').show().prop("required", true);

令人惊叹的！有一个问题，如果我想默认为第3项，并有3个文本字段显示我将如何做？更新的fiddle：可能在窗口加载函数的末尾有类似的内容：
$（'select[name=“Font”]”）。children（'option'）。eq（2）。attr（'selected'，'selected'）。end（）.change（）宾果！稍后我将对此进行全面测试，但乍一看它工作得很好。谢谢这是一个很好的实现…但是，当我将其放入实际页面时，它错误地显示了包含文本字段的所有div，但正确地隐藏了任何编号大于当前选择的文本字段…如果我删除此选项：
$（'.namesColumn.ihpinamerow'）.show（）它开始具有正确的功能，但丢失了dafault选择和显示/隐藏…以下是实际页面：任何帮助都将不胜感激。请尝试更改这些：
$（'.namesColumn input:text'）.hide（）.prop（“必需”，false）$（'.namesColumn.IH_pINameRow:lt（+（idx+1）+'）input:text'）.show（）.prop（“必需”，true）
到
$（'.IH_pINameRow'）.hide（）.children（'input:text'）.prop（'required'，false）$（'.IH_pINameRow:lt（+（idx+1）+'）.show（）.children（'input:text'）.prop（'required'，true）；
-通过这种方式，您可以显示/隐藏div，并在输入上设置/取消设置所需的类。谢谢，但第一个代码段显示的文本字段数量不正确，使用的是基数0而不是基数1，因此+1和第二个代码段看起来可能会有所帮助，但当添加到该脚本中时，它会出现不希望出现的情况……我会这样做吗要创建一个新脚本？我将第二个代码片段放在change方法之后。您得到了什么不想要的东西？将其添加到winodw加载函数中工作了…奇怪的是，当使用attila的方法时，我在dreamweaver中得到了不正确的显示，但在浏览器中得到了正确的显示…然而，使用您的方法，我在这两个方面都得到了完美的显示。。。
var idx = $(this).children('option:selected').index();

$('.namesColumn .NameImg.content:lt(' + idx + ') input:text').show().prop("required", true);

$('#fontSelect option:eq(3)').prop('selected', true);
$('#fontSelect').trigger('change');