Question

$(document).ready(function () {
			var presentyear = new Date().getFullYear();
			for(y = 1995; y <= presentyear; y++)
			{
        		var optn = document.createElement("option");
        		optn.text = y;
        		optn.value = y;        
        
        		document.getElementById('year10').options.add(optn);
    		}
    	});

<select id="year10">
  <option>select year</option>
  //all the values will be dynamically added as called by function in js
</select>

<select id="gap">
  <option value="0">Select Number of Years</option>
  <option value="1">1 year</option>
  <option value="2">2 years</option>
  <option value="3">3 years</option>
  <option value="4">4 years</option>
  <option value="5">5 years</option>
</select>

<select id="year12">
  <option id="calvalue"> </option>
</select>

我想保存两个选择标记中的选定值，并在单独的第三个选择下拉列表中显示总和。

与上面的代码段一样，我有三个选择标签，javascript代码填写了从1995年到2017年的'year10'选项。 'gap'选择有5个值。

现在，我想添加'year10'和'gap'的选定值，并在'year12'选择标记的单个选项（id ='calvalue'）中显示。此外，当我更改前两个选项中的值时，year12中的求和值必须随之改变。

怎么做？任何帮助表示赞赏

Answer 1

要实现这一点，您只需要为读取值并将它们添加到一起的两个选择添加change事件处理程序。

请注意，将结果放在select的另一个option中有点奇怪。我建议使用只读文本框，如下所示：

$(function() {
  var presentyear = new Date().getFullYear(), options = '';
  for (y = 1995; y <= presentyear; y++) {
    options += '<option value="' + y + '">' + y + '</option>';
  }
  $('#year10').append(options);
  
  $('#year10, #gap').change(function() {
    var year = parseInt($('#year10').val(), 10) || 0;
    var gap = parseInt($('#gap').val(), 10) || 0;
    $('#year12').val(!year ? '' : year + gap);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year10">
  <option>select year</option>
</select>

<select id="gap">
  <option value="0">Select Number of Years</option>
  <option value="1">1 year</option>
  <option value="2">2 years</option>
  <option value="3">3 years</option>
  <option value="4">4 years</option>
  <option value="5">5 years</option>
</select>

<input type="text" readonly="readonly" id="year12">

Answer 2

function jsFunction(){
  var myselect = document.getElementById("selectOpt");
  $("#secondselectbox").val(myselect);
}

<select onChange="jsFunction()" id="selectOpt">
    <option value="1" onclick="jsFunction()">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="secondselectbox">
</select>

在此代码中选择值后，您可以执行任何新功能（另一个选择标记）。

Answer 3

如果您对jquery感到满意......那么

<select id="num1" onchange="addThem()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select> 
<select id="num2"  onchange="addThem()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="res">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>
<script>
  function addThem(){
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    $("#res").val(Number(num1) +Number(num2));
  }
</script>

我所做的这个Plunker样本应该可以帮助你

Answer 4

你必须自己研究具体细节，但这应该可以让你开始。

let nextOption = {first: 1, seccond: 1}
function selected(selector, option) {
  if (selector === 'first') {
    nextOption.first = parseInt(option.value);
  }
  else if (selector === 'seccond') {
    nextOption.seccond = parseInt(option.value);
  }
  let newOption = document.createElement("option");
  newOption.text = nextOption.first + nextOption.seccond;
  document.getElementById('final').add(newOption);
}
selected();

<select onClick="selected('first', this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select onClick="selected('seccond', this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="final">
</select>

如何从两个<select>标签添加选定的值并在第三个</select>中显示总和

4 个答案: