CSS

@charset "utf-8";
/* CSS Document */

body,td,th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
body form select {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
.submit {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
body form {
text-align: center;
margin-top: 10px;
}
.submission {
margin:0 auto 0 auto;
height:500px;
width:400px;
border:#000000 solid 3px;
float:left;
padding: 20px 0;
}
.center {
margin:0 auto;
width: 812px;
}
.left{
text-align:left;
}
.right{
float:; 
}
.eighty{
width:80%;
}
.marg_20{
margin-left:20px;
}
.marg_40{
margin-left:40px;
}
.marg_60{
margin-left:60px;
}
.content{
display:none ;
}
.up20{
margin-top:-20px;
}
.signMain{
width:200px;
height:100px;
background:WhiteSmoke ;
margin:20px auto 0;
}
.test{
width: 198px;
height: 20px;
margin-right: auto;
margin-left: auto;
float: left;
margin-bottom: 5px;
font-size:20px;
text-align:center;
}
/*select
{
color: #ccc;
}
option
{
color: #000;
}
option:first-child
{
color: #ccc;
}
*/
.submitDiv {
height: 100px;
}
.signCreatorDiv {
height: 400px;
}
.namesColumn{
width:200px;
height:350px;
margin:0 auto;
}

Javascript

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('select[name="Font"]').change(function () {
var idx = $(this).index();
$('.namesColumn input:text').hide().prop("required", false);
$('.namesColumn .NameImg.content').show();
$('.namesColumn .NameImg.content:lt(' + (idx + 1 ) + ') input:text').show().prop("required", true); 
})
});//]]>  

</script>

HTML

<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>

скрипт с моими (неудачными) изменениями, чтобы сделать его меню выбора http://jsfiddle.net/EzxAj/2/

Поэтому я бы хотел включить и отключить текстовые области с помощью меню выбора вместо группы радио. Я уверен, что это мой синтаксис, но я просто не могу сделать ничего, кроме определенного # из divs show... индекс не работает одинаково с выбранными меню?

Редактировать:

Я также хотел бы иметь его по умолчанию для 3-го элемента select и иметь 3 связанных текстовых поля, видимых при загрузке страницы.

Изменить 2

В реальной реализации здесь: http://2plygraphics.com/im-here/ divs отображаются по умолчанию, и он выглядит как скрипт здесь: $('.namesColumn.IH_pINameRow').show(); является виновником... назначением стиля блока для div... когда я удаляю его, он уходит, но, очевидно, скрипт больше не работает так, как ожидалось.