如何使用javascript隐藏和显示表单文本字段

时间:2013-04-10 21:16:58

标签: javascript html5

我有这个代码,当选择下拉菜单的第二个值时,它会隐藏一些表单文本字段。

问题是如何在我添加更多文本字段到我想要隐藏的html表单并根据下面提供的代码显示之后编辑此javascript代码:

    <form id="form5" name="form5" class="wufoo topLabel page1" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
action="#">

<header id="header" class="info">
<h2>Personal Shopper Order Form</h2>
<div>Place your order by filling this form</div>
</header>

<ul class="running">


<li class="total">
<output id="lola">
</output>
</li>


<li id="fo5li1" class="notranslate       ">
<label class="desc" id="title1" for="Field1">
Choose a plan
<span id="req_1" class="req">*</span>
</label>
<div>
<select id="Field1" name="Field1" class="field select medium" onclick="handleInput(this);" onkeyup="handleInput(this);" tabindex="1" > 
<option value="Lite Plan $0 per order" selected="selected">
Lite Plan $0 per order
</option>
<option value="Pro Plan $10 per order" >
Pro Plan $10 per order
</option>
</select>
</div>
<p class="instruct" id="instruct1"><small>Lite plan for order with a single item, Pro plan for order with up to 3 items per order.</small></p>
</li>



<li id="fo5li3" class="notranslate      ">
<label class="desc" id="title3" for="Field3">
Item #1 Name
<span id="req_3" class="req">*</span>
</label>
<div>
<input id="Field3" name="Field3" type="text" class="field text medium" value="" maxlength="100" tabindex="2" onkeyup="handleInput(this); validateRange(3, 'character');" onchange="handleInput(this);" required />
<label for="Field3">Must be between <var id="rangeMinMsg3">4</var> and <var id="rangeMaxMsg3">100</var> characters.&nbsp;&nbsp;&nbsp; <em class="currently">Currently Used: <var id="rangeUsedMsg3">0</var> characters.</em></label>
</div>
<p class="instruct" id="instruct3"><small>Item name such as "iPad3 32GB wifi & 3G.</small></p>
</li>


<li id="fo5li2" class="notranslate      ">
<label class="desc" id="title2" for="Field2">
Item #1 Price
<span id="req_2" class="req">*</span>
</label>
<span class="symbol">$</span>
<span>
<input id="Field2" name="Field2" type="text" class="field text currency nospin" value="" size="10" tabindex="3" onkeyup="handleInput(this);" onchange="handleInput(this);" required />
<label for="Field2">Dollars</label>
</span>
<span class="symbol radix">.</span>
<span class="cents">
<input id="Field2-1" name="Field2-1" type="text" class="field text nospin" value="" size="2" maxlength="2" tabindex="4" onkeyup="handleInput(this);" onchange="handleInput(this);" />
<label for="Field2-1">Cents</label>
</span>
<p class="instruct" id="instruct2"><small>Item(s) Price as listed on the US online store.</small></p>
</li>


<li id="fo5li4" class="notranslate      hide">
<label class="desc" id="title4" for="Field4">
Item #2 Name
<span id="req_4" class="req">*</span>
</label>
<div>
<input id="Field4" name="Field4" type="text" class="field text medium" value="" maxlength="100" tabindex="5" onkeyup="handleInput(this); validateRange(4, 'character');" onchange="handleInput(this);" required />
<label for="Field4">Must be between <var id="rangeMinMsg4">4</var> and <var id="rangeMaxMsg4">100</var> characters.&nbsp;&nbsp;&nbsp; <em class="currently">Currently Used: <var id="rangeUsedMsg4">0</var> characters.</em></label>
</div>
<p class="instruct" id="instruct4"><small>Item name such as "iPad3 32GB wifi & 3G.</small></p>
</li>


<li id="fo5li6" class="notranslate      hide">
<label class="desc" id="title6" for="Field6">
Item #2 Price
<span id="req_6" class="req">*</span>
</label>
<span class="symbol">$</span>
<span>
<input id="Field6" name="Field6" type="text" class="field text currency nospin" value="" size="10" tabindex="6" onkeyup="handleInput(this);" onchange="handleInput(this);" required />
<label for="Field6">Dollars</label>
</span>
<span class="symbol radix">.</span>
<span class="cents">
<input id="Field6-1" name="Field6-1" type="text" class="field text nospin" value="" size="2" maxlength="2" tabindex="7" onkeyup="handleInput(this);" onchange="handleInput(this);" />
<label for="Field6-1">Cents</label>
</span>
</li>

<li id="fo5li4" class="notranslate      hide">
<label class="desc" id="title4" for="Field14">
Item #3 Name
<span id="req_4" class="req">*</span>
</label>
<div>
<input id="Field4" name="Field14" type="text" class="field text medium" value="" maxlength="100" tabindex="5" onkeyup="handleInput(this); validateRange(4, 'character');" onchange="handleInput(this);" required />
<label for="Field4">Must be between <var id="rangeMinMsg4">4</var> and <var id="rangeMaxMsg4">100</var> characters.&nbsp;&nbsp;&nbsp; <em class="currently">Currently Used: <var id="rangeUsedMsg4">0</var> characters.</em></label>
</div>
<p class="instruct" id="instruct4"><small>Item name such as "iPad3 32GB wifi & 3G.</small></p>
</li>


<li id="fo5li6" class="notranslate      hide">
<label class="desc" id="title6" for="Field16">
Item #3 Price
<span id="req_6" class="req">*</span>
</label>
<span class="symbol">$</span>
<span>
<input id="Field6" name="Field16" type="text" class="field text currency nospin" value="" size="10" tabindex="6" onkeyup="handleInput(this);" onchange="handleInput(this);" required />
<label for="Field6">Dollars</label>
</span>
<span class="symbol radix">.</span>
<span class="cents">
<input id="Field16-1" name="Field16-1" type="text" class="field text nospin" value="" size="2" maxlength="2" tabindex="7" onkeyup="handleInput(this);" onchange="handleInput(this);" />
<label for="Field6-1">Cents</label>
</span>
</li>

<li id="fo5li8" class="notranslate section      ">
<section>
<h3 id="title8">
Personal Information
</h3>
<div id="instruct8">Shipping address where your packages will be shipped to!</div>
</section>
</li>


<li id="fo5li9" class="date notranslate      ">
<label class="desc" id="title9" for="Field9">
Date
</label>
<span>
<input id="Field9-1" name="Field9-1" type="text" class="field text" value="" size="2" maxlength="2" tabindex="8" onkeyup="handleInput(this);" onchange="handleInput(this);" />
<label for="Field9-1">MM</label>
</span> 
<span class="symbol">/</span>
<span>
<input id="Field9-2" name="Field9-2" type="text" class="field text" value="" size="2" maxlength="2" tabindex="9" onkeyup="handleInput(this);" onchange="handleInput(this);" />
<label for="Field9-2">DD</label>
</span>
<span class="symbol">/</span>
<span>
 <input id="Field9" name="Field9" type="text" class="field text" value="" size="4" maxlength="4" tabindex="10" onkeyup="handleInput(this);" onchange="handleInput(this);" />
<label for="Field9">YYYY</label>
</span>
<span id="cal9">
<img id="pick9" class="datepicker" src="/images/icons/calendar.png" alt="Pick a date." />
</span>
</li>



<li id="fo5li10" class="notranslate  notStacked     ">
<fieldset>
<![if !IE | (gte IE 8)]>
<legend id="title10" class="desc">
Gender
<span id="req_10" class="req">*</span>
</legend>
<![endif]>
<!--[if lt IE 8]>
<label id="title10" class="desc">
Gender
<span id="req_10" class="req">*</span>
</label>
<![endif]-->
<div>
<input id="radioDefault_10" name="Field10" type="hidden" value="" />
<span>
<input id="Field10_0" name="Field10" type="radio" class="field radio" value="Male" tabindex="11" onchange="handleInput(this);" onmouseup="handleInput(this);" checked="checked"  
required />
<label class="choice" for="Field10_0" >
Male</label>
</span>
<span>
<input id="Field10_1" name="Field10" type="radio" class="field radio" value="Female" tabindex="12" onchange="handleInput(this);" onmouseup="handleInput(this);" required />
<label class="choice" for="Field10_1" >
Female</label>
</span>
</div>
</fieldset>
</li>


<li id="fo5li11" class="complex notranslate      ">
<label class="desc" id="title11" for="Field11">
Address
<span id="req_11" class="req">*</span>
</label>
<div>
<span class="full addr1">
<input id="Field11" name="Field11" type="text" class="field text addr" value="" tabindex="13" onkeyup="handleInput(this);" onchange="handleInput(this);" required />
<label for="Field11">Street Address</label>
</span>
<span class="full addr2">
<input id="Field12" name="Field12" type="text" class="field text addr" value="" tabindex="14" onkeyup="handleInput(this);" onchange="handleInput(this);" />
<label for="Field12">Address Line 2</label>
</span>
<span class="left city">
<input id="Field13" name="Field13" type="text" class="field text addr" value="" tabindex="15" onkeyup="handleInput(this);" onchange="handleInput(this);" required />
<label for="Field13">City</label>
</span>
<span class="right state">
<input id="Field14" name="Field14" type="text" class="field text addr" value="" tabindex="16" onkeyup="handleInput(this);" onchange="handleInput(this);" required />
<label for="Field14">State / Province / Region</label>
</span>
<span class="left zip">
<input id="Field15" name="Field15" type="text" class="field text addr" value="" maxlength="15" tabindex="17" onkeyup="handleInput(this);" onchange="handleInput(this);" required />
<label for="Field15">Postal / Zip Code</label>
</span>
<span class="right country">
<select id="Field16" name="Field16" class="field select addr" tabindex="18" onclick="handleInput(this);" onkeyup="handleInput(this);" >
<option value="" selected="selected"></option>
<option value="United States" >United States</option>
<option value="United Kingdom" >United Kingdom</option>
<option value="Australia" >Australia</option>
<option value="Canada" >Canada</option>
<option value="France" >France</option>
<option value="New Zealand" >New Zealand</option>
<option value="India" >India</option>
<option value="Brazil" >Brazil</option>
<option value="----" >----</option>
<option value="Afghanistan" >Afghanistan</option>
<option value="Åland Islands" >Åland Islands</option>
<option value="Albania" >Albania</option>
<option value="Algeria" >Algeria</option>
<option value="American Samoa" >American Samoa</option>
<option value="Andorra" >Andorra</option>
<option value="Angola" >Angola</option>
<option value="Anguilla" >Anguilla</option>
<option value="Antarctica" >Antarctica</option>
<option value="Antigua and Barbuda" >Antigua and Barbuda</option>
<option value="Argentina" >Argentina</option>
<option value="Armenia" >Armenia</option>
<option value="Aruba" >Aruba</option>
<option value="Austria" >Austria</option>
<option value="Azerbaijan" >Azerbaijan</option>
<option value="Bahamas" >Bahamas</option>
<option value="Bahrain" >Bahrain</option>
<option value="Bangladesh" >Bangladesh</option>
<option value="Barbados" >Barbados</option>
<option value="Belarus" >Belarus</option>
<option value="Belgium" >Belgium</option>
<option value="Belize" >Belize</option>
<option value="Benin" >Benin</option>
<option value="Bermuda" >Bermuda</option>
<option value="Bhutan" >Bhutan</option>
<option value="Bolivia" >Bolivia</option>
<option value="Bosnia and Herzegovina" >Bosnia and Herzegovina</option>
<option value="Botswana" >Botswana</option>
<option value="British Indian Ocean Territory" >British Indian Ocean Territory</option>
<option value="Brunei Darussalam" >Brunei Darussalam</option>
<option value="Bulgaria" >Bulgaria</option>
<option value="Burkina Faso" >Burkina Faso</option>
<option value="Burundi" >Burundi</option>
<option value="Cambodia" >Cambodia</option>
<option value="Cameroon" >Cameroon</option>
<option value="Cape Verde" >Cape Verde</option>
<option value="Cayman Islands" >Cayman Islands</option>
<option value="Central African Republic" >Central African Republic</option>
<option value="Chad" >Chad</option>
<option value="Chile" >Chile</option>
<option value="China" >China</option>
<option value="Colombia" >Colombia</option>
<option value="Comoros" >Comoros</option>
<option value="Democratic Republic of the Congo" >Democratic Republic of the Congo</option>
<option value="Republic of the Congo" >Republic of the Congo</option>
<option value="Cook Islands" >Cook Islands</option>
<option value="Costa Rica" >Costa Rica</option>
<option value="C&ocirc;te d'Ivoire" >C&ocirc;te d'Ivoire</option>
<option value="Croatia" >Croatia</option>
<option value="Cuba" >Cuba</option>
<option value="Cyprus" >Cyprus</option>
<option value="Czech Republic" >Czech Republic</option>
<option value="Denmark" >Denmark</option>
<option value="Djibouti" >Djibouti</option>
<option value="Dominica" >Dominica</option>
<option value="Dominican Republic" >Dominican Republic</option>
<option value="East Timor" >East Timor</option>
<option value="Ecuador" >Ecuador</option>
<option value="Egypt" >Egypt</option>
<option value="El Salvador" >El Salvador</option>
<option value="Equatorial Guinea" >Equatorial Guinea</option>
<option value="Eritrea" >Eritrea</option>
<option value="Estonia" >Estonia</option>
<option value="Ethiopia" >Ethiopia</option>
<option value="Faroe Islands" >Faroe Islands</option>
<option value="Fiji" >Fiji</option>
<option value="Finland" >Finland</option>
<option value="Gabon" >Gabon</option>
<option value="Gambia" >Gambia</option>
<option value="Georgia" >Georgia</option>
<option value="Germany" >Germany</option>
<option value="Ghana" >Ghana</option>
<option value="Gibraltar" >Gibraltar</option>
<option value="Greece" >Greece</option>
<option value="Grenada" >Grenada</option>
<option value="Guatemala" >Guatemala</option>
<option value="Guinea" >Guinea</option>
<option value="Guinea-Bissau" >Guinea-Bissau</option>
<option value="Guyana" >Guyana</option>
<option value="Haiti" >Haiti</option>
<option value="Honduras" >Honduras</option>
<option value="Hong Kong" >Hong Kong</option>
<option value="Hungary" >Hungary</option>
<option value="Iceland" >Iceland</option>
<option value="Indonesia" >Indonesia</option>
<option value="Iran" >Iran</option>
<option value="Iraq" >Iraq</option>
<option value="Ireland" >Ireland</option>
<option value="Israel" >Israel</option>
<option value="Italy" >Italy</option>
<option value="Jamaica" >Jamaica</option>
<option value="Japan" >Japan</option>
<option value="Jordan" >Jordan</option>
<option value="Kazakhstan" >Kazakhstan</option>
<option value="Kenya" >Kenya</option>
<option value="Kiribati" >Kiribati</option>
<option value="North Korea" >North Korea</option>
<option value="South Korea" >South Korea</option>
<option value="Kuwait" >Kuwait</option>
<option value="Kyrgyzstan" >Kyrgyzstan</option>
<option value="Laos" >Laos</option>
<option value="Latvia" >Latvia</option>
<option value="Lebanon" >Lebanon</option>
<option value="Lesotho" >Lesotho</option>
<option value="Liberia" >Liberia</option>
<option value="Libya" >Libya</option>
<option value="Liechtenstein" >Liechtenstein</option>
<option value="Lithuania" >Lithuania</option>
<option value="Luxembourg" >Luxembourg</option>
<option value="Macedonia" >Macedonia</option>
<option value="Madagascar" >Madagascar</option>
<option value="Malawi" >Malawi</option>
<option value="Malaysia" >Malaysia</option>
<option value="Maldives" >Maldives</option>
<option value="Mali" >Mali</option>
<option value="Malta" >Malta</option>
<option value="Marshall Islands" >Marshall Islands</option>
<option value="Mauritania" >Mauritania</option>
<option value="Mauritius" >Mauritius</option>
<option value="Mexico" >Mexico</option>
<option value="Micronesia" >Micronesia</option>
<option value="Moldova" >Moldova</option>
<option value="Monaco" >Monaco</option>
<option value="Mongolia" >Mongolia</option>
<option value="Montenegro" >Montenegro</option>
<option value="Morocco" >Morocco</option>
<option value="Mozambique" >Mozambique</option>
<option value="Myanmar" >Myanmar</option>
<option value="Namibia" >Namibia</option>
<option value="Nauru" >Nauru</option>
<option value="Nepal" >Nepal</option>
<option value="Netherlands" >Netherlands</option>
<option value="Netherlands Antilles" >Netherlands Antilles</option>
<option value="Nicaragua" >Nicaragua</option>
<option value="Niger" >Niger</option>
<option value="Nigeria" >Nigeria</option>
<option value="Norway" >Norway</option>
<option value="Oman" >Oman</option>
<option value="Pakistan" >Pakistan</option>
<option value="Palau" >Palau</option>
<option value="Palestine" >Palestine</option>
<option value="Panama" >Panama</option>
<option value="Papua New Guinea" >Papua New Guinea</option>
<option value="Paraguay" >Paraguay</option>
<option value="Peru" >Peru</option>
<option value="Philippines" >Philippines</option>
<option value="Poland" >Poland</option>
<option value="Portugal" >Portugal</option>
<option value="Puerto Rico" >Puerto Rico</option>
<option value="Qatar" >Qatar</option>
<option value="Romania" >Romania</option>
<option value="Russia" >Russia</option>
<option value="Rwanda" >Rwanda</option>
<option value="Saint Kitts and Nevis" >Saint Kitts and Nevis</option>
<option value="Saint Lucia" >Saint Lucia</option>
<option value="Saint Vincent and the Grenadines" >Saint Vincent and the Grenadines</option>
<option value="Samoa" >Samoa</option>
<option value="San Marino" >San Marino</option>
<option value="Sao Tome and Principe" >Sao Tome and Principe</option>
<option value="Saudi Arabia" >Saudi Arabia</option>
<option value="Senegal" >Senegal</option>
<option value="Serbia" >Serbia</option>
<option value="Seychelles" >Seychelles</option>
<option value="Sierra Leone" >Sierra Leone</option>
<option value="Singapore" >Singapore</option>
<option value="Slovakia" >Slovakia</option>
<option value="Slovenia" >Slovenia</option>
<option value="Solomon Islands" >Solomon Islands</option>
<option value="Somalia" >Somalia</option>
<option value="South Africa" >South Africa</option>
<option value="Spain" >Spain</option>
<option value="Sri Lanka" >Sri Lanka</option>
<option value="Sudan" >Sudan</option>
<option value="Suriname" >Suriname</option>
<option value="Swaziland" >Swaziland</option>
<option value="Sweden" >Sweden</option>
<option value="Switzerland" >Switzerland</option>
<option value="Syria" >Syria</option>
<option value="Taiwan" >Taiwan</option>
<option value="Tajikistan" >Tajikistan</option>
<option value="Tanzania" >Tanzania</option>
<option value="Thailand" >Thailand</option>
<option value="Togo" >Togo</option>
<option value="Tonga" >Tonga</option>
<option value="Trinidad and Tobago" >Trinidad and Tobago</option>
<option value="Tunisia" >Tunisia</option>
<option value="Turkey" >Turkey</option>
<option value="Turkmenistan" >Turkmenistan</option>
<option value="Tuvalu" >Tuvalu</option>
<option value="Uganda" >Uganda</option>
<option value="Ukraine" >Ukraine</option>
<option value="United Arab Emirates" >United Arab Emirates</option>
<option value="United States Minor Outlying Islands" >United States Minor Outlying Islands</option>
<option value="Uruguay" >Uruguay</option>
<option value="Uzbekistan" >Uzbekistan</option>
<option value="Vanuatu" >Vanuatu</option>
<option value="Vatican City" >Vatican City</option>
<option value="Venezuela" >Venezuela</option>
<option value="Vietnam" >Vietnam</option>
<option value="Virgin Islands, British" >Virgin Islands, British</option>
<option value="Virgin Islands, U.S." >Virgin Islands, U.S.</option>
<option value="Yemen" >Yemen</option>
<option value="Zambia" >Zambia</option>
<option value="Zimbabwe" >Zimbabwe</option>
</select>
<label for="Field16">Country</label>
</span>
</div>
</li>



<li id="fo5li17" class="notranslate      ">
<label class="desc" id="title17" for="Field17">
Email
</label>
<div>
<input id="Field17" name="Field17" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="19" onkeyup="handleInput(this);" onchange="handleInput(this);" /> 
</div>
</li>





<li class="buttons ">
<div>
<input type="hidden" name="currentPage" id="currentPage" value="hrrPrWZVP1AZJEJQzZtacb98R0HanwMV1y1wuBeO5wuslashRLQ8=" />

                    <input id="saveForm" name="saveForm" class="btTxt submit" 
    type="submit" value="Submit"
 onmousedown="doSubmitEvents();" />


<a href="https://master.wufoo.com/forms/m7p0x3/def/field1=shopandship.wufoo.com/forms/personal-shopper-order-form/"
target="_blank"
style="font-size:85% !important;visibility:visible !important;display:inline !important;
background:none !important;border:none !important;color:blue !important;
text-indent:0 !important;text-decoration:underline !important;position:static !important;
margin:0 !important;padding:0 !important;overflow:none !important
width:auto !important;height:auto !important;">Report Abuse</a>
</div>
</li>

<li class="hide">
<label for="comment">Do Not Fill This Out</label>
<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
<input type="hidden" id="idstamp" name="idstamp" value="2kFNZeuYuz6lYe9uHWYSc2f1+Ee+ilanB5I5soK26Ek=" />
<input type="hidden" id="stats" name="stats" value="{&quot;errors&quot;:0,&quot;startTime&quot;:0,&quot;endTime&quot;:0,&quot;referer&quot;:null}" />
<input type="hidden" id="clickOrEnter" name="clickOrEnter" value="" />
</li>
</ul>
</form>







   <script>
__RULES = {"Field1":[{"RuleId":"36","Type":"Hide","Setting":{"FieldName":"4","FieldTypes":{"1":"select"}},"FormId":"5","MatchType":"any","Conditions":[{"ConditionId":"60","FieldName":"1","Filter":"is","Value":"Lite Plan $0 per order","ReportId":"5","RuleId":"36"}]},{"RuleId":"37","Type":"Hide","Setting":{"FieldName":"6","FieldTypes":{"1":"select"}},"FormId":"5","MatchType":"any","Conditions":[{"ConditionId":"61","FieldName":"1","Filter":"is","Value":"Lite Plan $0 per order","ReportId":"5","RuleId":"37"}]}]};
__ENTRY = [];
__PRICES = {"ShowRunningTotal":true,"BasePrice":"0.00","Currency":"&#36;","Decimals":2,"BasePriceName":"Pre\u00e7o base","TotalText":"Total","MerchantFields":[{"Title":"Choose a plan","Typeof":"select","ColumnId":"1","Price":"0","ChoicesText":"0","Choices":{"369":{"ColumnId":"1","ChoiceId":"369","Choice":"Lite Plan $0 per order","Price":"0","Score":1},"370":{"ColumnId":"1","ChoiceId":"370","Choice":"Pro Plan $10 per order","Price":"10","Score":2}},"DisplaySetting":""},{"Title":"Item #1 Price","Typeof":"money","ColumnId":"2","Price":"1","ChoicesText":"0","DisplaySetting":""},{"Title":"Item #2 Price","Typeof":"money","ColumnId":"6","Price":"1","ChoicesText":"0","DisplaySetting":""}],"BasePriceText":"Pre\u00e7o base"};

</script>

魔术代码在java脚本代码的规则下,如何将此功能添加到表单的新文本字段?

1 个答案:

答案 0 :(得分:0)

使用jquery的更改功能,根据所选值隐藏/显示您想要的任何内容 我的示例检查选择了哪个选项,第一个添加了一个具有click事件的新按钮 第二个选项添加另一个按钮并单击事件以隐藏所有按钮。我希望这很有用,这只是我第二次尝试stackoverflow来帮助。

        <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Using Functions</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
      $("select").change(function () {
        var value = $('#Field1 option:selected').val();
        if(value=='Lite Plan $0 per order'){
            alert("Selected value= " + value );
            $('div').append(value+'<button type="button">change again</button>');
            $('button').click(function(){
                $('#Field1').hide().fadeOut(3000);
                $('#Field1').fadeIn();
            });
        }
        else{
            alert("other value= " + value ); 
            $('div').append(value+'<button type="button">change again</button>');
            $('button').click(function(){
                $('button').hide();
            });
        }
      });
    });

</script>
</head>
<body>
<div>
    <select id="Field1" name="Field1" class="field select medium" > 
        <option></option>
            <option>
            Lite Plan $0 per order
            </option>
            <option>
            Pro Plan $10 per order
        </option>
    </select>
    </div>
</body>
</html>

enter code here