【发布时间】：2014-10-27 04:01:14
【问题描述】：
好的，我有这个用 JavaScript 编写的表单，我想将其更改为 Jquery。到目前为止，我已经设法使用“change（）”方法在点击时调用文本。然后，我还能够使用 set element 函数设置元素的内部 div。我一生都找不到如何做到这一点，并让该功能存储从选定选项下拉菜单中选择的信息，然后提交元素的 html。这是我目前所拥有的。
<script>
$('#btn1').click(function(){
$('#test1').text('You Picked' + :selected);
});
</script>
<!-- Body -->
<select name="create" id="create">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<select name="somethingElse" id="somethingElse">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button id="btn1">Submit</button>
<p id="test1">This is a paragraph.</p>
JavaScript 版本更长；但是，为了让您了解我在这里尝试完成的工作，请参见下文
<script type="text/javascript">
//Auto Array
var autoArray = new Array();
autoArray[0] = "Auto Repair on Monday";
autoArray[1] = "Auto Repair on Tuesday";
autoArray[2] = "Auto Repair on Wednesday";
autoArray[3] = "Auto Repair on Thursday";
//Computer Array
var computerArray = new Array();
computerArray[0] = "Computer on Monday";
computerArray[1] = "Computer on Tuesday";
computerArray[2] = "Computer on Wednesday";
computerArray[3] = "Computer on Thursday";
//HomeRepair
var homeArray = new Array();
homeArray[0] = "Home Repair on Monday";
homeArray[1] = "Home Repair on Tuesday";
homeArray[2] = "Home Repair on Wednesday";
homeArray[3] = "Home Repair on Thursday";
//Plumbing
var plumbingArray = new Array();
plumbingArray[0] = "Plumbing on Monday";
plumbingArray[1] = "Plumbing on Tuesday";
plumbingArray[2] = "Plumbing on Wednesday";
plumbingArray[3] = "Plumbing on Thursday";
//Gets called and does all the main work
function getServices()
{
//Date Selected
datesVal = getDatesVal();
//Service Selected
serviceVal = getServicesVal();
//Initial value for services
serviceText = "Your Service date is: ";
if(datesVal == 0)
{
if(serviceVal == 0)
{
serviceText = serviceText + autoArray[0];
}
if(serviceVal == 1)
{
serviceText = serviceText + computerArray[0];
}
if(serviceVal == 2)
{
serviceText = serviceText + homeArray[0];
}
if(serviceVal == 3)
{
serviceText = serviceText + plumbingArray[0];
}
}
if(datesVal == 1)//Tuesday
{
if(serviceVal == 0)
{
serviceText = serviceText + autoArray[1];
}
if(serviceVal == 1)
{
serviceText = serviceText + computerArray[1];
}
if(serviceVal == 2)
{
serviceText = serviceText + homeArray[1];
}
if(serviceVal == 3)
{
serviceText = serviceText + plumbingArray[1];
}
}
if(datesVal == 2)
{
if(serviceVal == 0)//Wednesday
{
serviceText = serviceText + autoArray[2];
}
if(serviceVal == 1)
{
serviceText = serviceText + computerArray[2];
}
if(serviceVal == 2)
{
serviceText = serviceText + homeArray[2];
}
if(serviceVal == 3)
{
serviceText = serviceText + plumbingArray[2];
}
}
if(datesVal == 3)//Thursday
{
if(serviceVal == 0)
{
serviceText = serviceText + autoArray[3];
}
if(serviceVal == 1)
{
serviceText = serviceText + computerArray[3];
}
if(serviceVal == 2)
{
serviceText = serviceText + homeArray[3];
}
if(serviceVal == 3)
{
serviceText = serviceText + plumbingArray[3];
}
}
writeText(serviceText);
}
//Gets the value of the dates RadioButtons
//Returns an integer
function getDatesVal()
{
//Use the document object model to get the radio button that is checked
//Format is document.<formName>"."<Objectname>;
if(document.radioButtonForm.datesRB[0].checked)
{
return 0;//Monday
}
if(document.radioButtonForm.datesRB[1].checked)
{
return 1;//Tuesday
}
if(document.radioButtonForm.datesRB[2].checked)
{
return 2;//Wednesday
}
if(document.radioButtonForm.datesRB[3].checked)
{
return 3;//Thursday
}
//Default value
return 0;
}
//Gets the value of the Classes RadioButtons
//Returns an integer
function getServicesVal()
{
//Use the document object model to get the radio button that is checked
//Format is document.<formName>.<Objectname>
if(document.radioButtonForm.servicesRB[0].checked)
{
return 0;//Auto
}
if(document.radioButtonForm.servicesRB[1].checked)
{
return 1;//Computer
}
if(document.radioButtonForm.servicesRB[2].checked)
{
return 2;//Home Repair
}
if(document.radioButtonForm.servicesRB[3].checked)
{
return 3;//Plumbing
}
//Default value
return 0;
}
//Writes text in to the Text Area
//Takes a string to write in to the text area
function writeText(serviceText)
{
document.radioButtonForm.textA.value = serviceText;
}
</script>
<!--Body-->
<form name="radioButtonForm" class="form" role="form">
<p>Select your Services from the list: </p>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="datesRB" checked="checked">
<span class="radio-label">Monday</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="datesRB">
<span class="radio-label">Tuesday</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="datesRB">
<span class="radio-label">Wednesday</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="datesRB">
<span class="radio-label">Thursday</span>
</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="servicesRB" checked="checked">
<span class="radio-label">Auto</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="servicesRB">
<span class="radio-label">Computer</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="servicesRB">
<span class="radio-label">Home Repair</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="servicesRB">
<span class="radio-label">Plumbing</span>
</label>
</div>
</div>
<div class="form-group">
<textarea name="textA" class="form-control">Your Scheduled Appointment here...</textarea>
</div>
<div class="form-group">
<a type="button" value="Submit" class="btn btn-success" onclick="getServices()">Submit</a>
</div>
</form>
我花了 7 多个小时浏览 jquery.com 和所有其他网站以包含这个网站，但似乎对语法的理解不够好，无法找到我搞砸的地方
【问题讨论】：
标签： javascript jquery html forms dom