如何检查所选选项，获取数组值并通过按按钮将其值写入div

这个问题可能有点模糊，但我会尽量说得通。

这是我的 HTML：

<div id="buttonholder">
    <button id="previous">< Previous round</button>
    <button id="next">Next round ></button>
    <button id="current">> Current round <</button>
<div style="font-size: 0;">
       <form id="inputform">
   <select name="rounds" id="selectbox">
    <option value="Round 1">--- Round 1 ---</options>
    <option value="Round 2">--- Round 2 ---</options>
    <option value="Round 3">--- Round 3 ---</options>
    <option value="Round 4">--- Round 4 ---</options>
    <option value="Round 5">--- Round 5 ---</options>
    <option value="Round 6">--- Round 6 ---</options>
    <option value="Round 7">--- Round 7 ---</options>
    <option value="Round 8">--- Round 8 ---</options>
    <option value="Round 9">--- Round 9 ---</options>
    <option value="Round 10">--- Round 10 ---</options>
    <option value="Round 11">--- Round 11 ---</options>
    <option value="Round 12">--- Round 12 ---</options>
    <option value="Round 13">--- Round 13 ---</options>
    <option value="Round 14">--- Round 14 ---</options>
    <option value="Round 15">--- Round 15 ---</options>
    <option value="Round 16">--- Round 16 ---</options>
    <option value="Round 17">--- Round 17 ---</options>
    <option value="Round 18">--- Round 18 ---</options>
    <option value="Round 19">--- Round 19 ---</options>
    <option value="Round 20">--- Round 20 ---</options>
    <option value="Round 21">--- Round 21 ---</options>
    <option value="Round 22">--- Round 22 ---</options>
    <option value="Round 23">--- Round 23 ---</options>
    <option value="Round 24">--- Round 24 ---</options>
    <option value="Round 25">--- Round 25 ---</options>
    <option value="Round 26">--- Round 26 ---</options>
    <option value="Round 27">--- Round 27 ---</options>
    <option value="Round 28">--- Round 28 ---</options>
    <option value="Round 29">--- Round 29 ---</options>
    <option value="Round 30">--- Round 30 ---</options>
    <option value="Round 31">--- Round 31 ---</options>
    <option value="Round 32">--- Round 32 ---</options>
    <option value="Round 33">--- Round 33 ---</options>
    <option value="Round 34">--- Round 34 ---</options>
    <option value="Round 35">--- Round 35 ---</options>
    <option value="Round 36">--- Round 36 ---</options>
    <option value="Round 37">--- Round 37 ---</options>
    <option value="Round 38">--- Round 38 ---</options>
    </select>
    <button id="submit">Go</button>
</form>
</div>
<div id="displayround">
</div>
</div>

这是我的 JQuery：

$(document).ready(function() { 
var round = new Array(); //The round displayed in the #displayround div
round[0]="1/38";
round[1]="2/38";
round[2]="3/38";
round[3]="4/38";
round[4]="5/38";
round[5]="6/38";
round[6]="7/38";
round[7]="8/38";
round[8]="9/38";
round[9]="10/38";
round[10]="11/38";
round[11]="12/38";
round[12]="13/38";
round[13]="14/38";
round[14]="15/38";
round[15]="16/38";
round[16]="17/38";
round[17]="18/38";
round[18]="19/38";
round[19]="20/38";
round[20]="21/38";
round[21]="22/38";
round[22]="23/38";
round[23]="24/38";
round[24]="25/38";
round[25]="26/38";
round[26]="27/38";
round[27]="28/38";
round[28]="29/38";
round[29]="30/38";
round[30]="31/38";
round[31]="32/38";
round[32]="33/38";
round[33]="34/38";
round[34]="35/38";
round[35]="36/38";
round[36]="37/38";
round[37]="38/38";
$("#buttonholder").find("button").addClass("left")
$("#buttonholder").find("#submit").removeClass("left").addClass("right")
$("#buttonholder").find("#inputform").addClass("right");
$("#displayround").text(round[0]).data('index', 0);
$("#next").click(function () {
   var index = +$("#displayround").data('index') + 1;
   if (index >= round.length) index = 0;
  $("#displayround").text(round[index]).data('index', index);
});
$("#previous").click(function () {
   var index = +$("#displayround").data('index') - 1;
   if (index <= -1) index = round.length - 1;
  $("#displayround").text(round[index]).data('index', index);
})
}); //end of document.ready function

现在我想发生的是：

首先从选择框中选择一个回合
您单击"开始"按钮
通过抓取数组值，文本更改为"#displayround"中的选定轮

如何使用 Jquery 实现这一点？

你应该使用change事件

$('#selectbox').change(function () {
    //Extracted digit from the selected value
    var index = $(this).val().match(/d+/) - 1;
    $("#displayround").text(round[index]).data('index', index);
});

演示

此外，我建议您将索引存储为值。

编辑

$('#selectbox').change(function () {
    //Extracted digit from the selected value
    var index = $(this) // Invoker of event or simply say element
    .val() //get selected value example Rouuld 10
    .match(/d+/) - 1;  // /d+/ is regular expression to get digits i.e. 10
    $("#displayround").text(round[index]).data('index', index);
});

我添加了一个演示！我认为这将对您有很大帮助并避免一些编码：

我用jquery为你生成了选项，所以你没有一个大的html <上一轮下一轮="> > 本轮< 去

在 js 中：

$( document ).ready(function() {
createComboBox(1,38,$( "select[name='rounds']"));
$("#buttonholder").find("button").addClass("left")
$("#buttonholder").find("#submit").removeClass("left").addClass("right")
$("#buttonholder").find("#inputform").addClass("right");
$("#displayround").text($("select[name='rounds']").val());
$("#next").click(function () {
  $("#displayround").text(displayValue(parseInt($("select[name='rounds']").val())+1));
});
$("#previous").click(function () {
  $("#displayround").text(displayValue(parseInt($("select[name='rounds']").val())-1));
})
$('#selectbox').change(function(){
    $("#displayround").text(displayValue($(this).val()));
});
$('#current').click(function () {
  $("#displayround").text(displayValue($('#selectbox').val()));
});
 });
    function displayValue(value)
{
    return value +'/38';
}

这个函数创建组合框

    function createComboBox(min,max,selector)
{
    var p;
    for(var i=min; i<max+1; i++)
    {
         p += '<OPTION VALUE='+i+'>'+'Round '+i+'</OPTION>';        
    }
    selector.append(p);
}

编辑

相关内容

最新更新

热门标签：