Question

好的，我有这个用JavaScript编写的表单，我想把它改成Jquery。到目前为止，我已经设法使用＆＃39;更改（）＆＃39;方法。然后，我也可以使用set元素函数设置元素的内部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和其他所有网站以包含这一个，似乎不太了解语法，无法搞清楚我搞砸的地方

FIDDLE

Answer 1

这就是你要找的东西吗？

$('#btn1').click(function () {
  var colorSelected = $("#create").val();
  var optionSelected = $("#somethingElse").val();

  $('#test1').text('You Picked ' + colorSelected + " and " + optionSelected);
});

FIDDLE

Answer 2

据我了解，您只需要获取所选选项的值即可。您可以在Jquery中轻松使用.val()函数。从official documentation开始，您可以执行以下操作：

$( "#myselect" ).val(); 
//myselect is the id of the select element you want to capture

Working Demo

希望它能让你开始朝着正确的方向前进。

Jquery在按钮单击功能上将HTML更改为div：已选中

2 个答案: