javascript - Jquery 在按钮单击功能上将 HTML 更改为 div :selected

Question

好的，我用 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 和其他所有网站来包含这个网站，但似乎对语法的理解不够好，无法理解我搞砸的地方

FIDDLE

Answer 1

这是您要找的吗？

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

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

FIDDLE