问基于选择的显示字段(JS)
EN

Stack Overflow用户

提问于 2021-06-18 03:36:22

回答 2查看 57关注 0票数 0

我试图根据菜单选择选项中选择的内容来显示字段。

我尝试了一些JS，并借助这里在Stackoverflow上找到的其他帖子，但是失败了。

我是一个粉丝，我不太了解js，我希望能在这个问题上找到帮助。感谢大家的任何回答，我留下了下面的信息。

I想显示以下结果: var dayli_intake_mass = ((+
)/ 100 * (+ tdee) + (+ tdee)+(+ tdee))；只有在选择mass1、mass2或mass3时才能显示。

否则

I要显示以下结果: var dayli_intake_def = ((+ tdee) - (+
)/ 100 * (+ tdee))；只有在选择def1、def2或def3时才能显示。

因此，mass1、mass2和mass3的选择应该显示dayli_intake_mass

而选择的def1、def2和def3应该显示dayli_intake_def

1点是加法，2点是减法。我不希望这两个字段都是可见的，而是基于所选内容的两个字段中的一个。

我为糟糕的英语道歉：

<div class="fieldcontainer">
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="4" id="tdee" name"tdee" placeholder="Inserisci il tuo TDEE" form="fbday" required autocomplete="off"/>
<label>Spesa calorica</label>
</div>

<div class="container_level">
  <select class="target" id="target_select" form="fbday" name="target">
    <option value="0">Stile di vita / Attività fisica</option>
    <option id="mass1" name="radsa" value="5">mass1</option>
    <option id="mass2" name="radsa" value="10">mass2</option>
    <option id="mass3" name="radsa" value="15">mass3</option>
    <option id="def1" name="radsa" value="10">def1</option>
    <option id="def2" name="radsa" value="15">def2</option>
    <option id="def3" name="radsa" value="20">def3</option>
  </select>
</div>

<!---Fabbisogno Giornaliero--->

<div id="fbbday0" class="results" hidden>
<input type="text" form="fbday" class="result-field" id="dayli_intake_mass" name="dayli_intake"
placeholder="Fabbisogno giornaliero / 0.000 Kcal" min="1" readonly/>
<label class="mts-label"></label>
</div>

<div id="fbbday1" class="results" hidden>
<input type="text" form="fbday" class="result-field" id="dayli_intake_def" name="dayli_intake"
placeholder="Fabbisogno giornaliero / 0.000 Kcal" min="1" readonly/>
<label class="mts-label"></label>
</div>

<form action="" id="fbday">
</form>

<button name="calculate" onclick="calculate()">Calculate</button>
<button id="reset" onclick="resetFields()">Reset</button>

calculate = function()
{
    var tdee = document.getElementById('tdee').value;
    var target = document.querySelector('#target_select option:checked').value;
    
    var dayli_intake_mass = ((+target)/100*(+tdee)+(+tdee));
    var kcal = "Devi assumere "+dayli_intake_mass.toLocaleString('it-IT',{maximumFractionDigits: 0}) + " Kcal"; document.getElementById('dayli_intake_mass').value = kcal;
    
    var dayli_intake_def = ((+tdee)-(+target)/100*(+tdee));
    var kcal = "Devi assumere "+dayli_intake_def.toLocaleString('it-IT',{maximumFractionDigits: 0}) + " Kcal"; document.getElementById('dayli_intake_def').value = kcal;
    
//This is Target Radio Selection//
 var mass1 = document.getElementById('mass1').value;
 var mass2 = document.getElementById('mass2').value;
 var mass3 = document.getElementById('mass3').value;
 var def1 = document.getElementById('def1').value;
 var def2 = document.getElementById('def2').value;
 var def3 = document.getElementById('def3').value;    

//This is HideShow Result//
var conditional = document.querySelector('#target_select option:checked').value;
document.getElementById('dayli_intake_mass').hidden = conditional !== '5';
document.getElementById('dayli_intake_mass').hidden = conditional !== '10';
document.getElementById('dayli_intake_mass').hidden = conditional !== '15';
document.getElementById('dayli_intake_def').hidden = conditional !== '10';
document.getElementById('dayli_intake_def').hidden = conditional !== '15';
document.getElementById('dayli_intake_def').hidden = conditional !== '20';
}

https://jsfiddle.net/snake93/w1nLbhxv/81/

javascript

html

音视频体验馆免费体验试用

一站式·全方位体验音视频产品，所见即所得，30分钟即可上线同款能力

回答 2

Stack Overflow用户

发布于 2021-06-18 03:49:58

编辑过的

您可以使用change事件来处理这个
，当您选择其中一个列表时，它将调用change事件，然后检查或执行您的代码
，因为它们之间有一些类似的值，例如mass2值= 10，以及def1 value = 10。H 210H 111由于不能只比较值，还需要比较元素id，所以我在比较操作H 212F 213中添加了id。

，这是代码

var target_select = document.getElementById("target_select");

target_select.addEventListener("change", function () {
  var tdee = document.getElementById('tdee').value;
  var target = document.querySelector('#target_select option:checked');
  var fbbday1 = document.getElementById('fbbday1'),
  fbbday0 = document.getElementById('fbbday0')

  var dayli_intake_mass = ((+target.value)/100*(+tdee)+(+tdee));
  var dayli_intake_def = ((+tdee)-(+target.value)/100*(+tdee));
  
    //This is Target Radio Selection//
 var mass1 = document.getElementById('mass1').value;
 var mass2 = document.getElementById('mass2').value;
 var mass3 = document.getElementById('mass3').value;
 var def1 = document.getElementById('def1').value;
 var def2 = document.getElementById('def2').value;
 var def3 = document.getElementById('def3').value;
 var massArr = [mass1, mass2, mass3],
 deffArr = [def1, def2, def3]

    if(massArr.indexOf(this.value) != -1 && target.id === 'mass1' || target.id === 'mass2' || target.id === 'mass3') {
        fbbday0.removeAttribute('hidden')
        document.getElementById('dayli_intake_mass').value = dayli_intake_mass;
    } else {
        fbbday0.setAttribute('hidden', true)
    }
    if(deffArr.indexOf(this.value) != -1 && target.id === 'def1' || target.id === 'def2' || target.id === 'def3') {
        fbbday1.removeAttribute('hidden')
        document.getElementById('dayli_intake_def').value = dayli_intake_def;
    } else {
        fbbday1.setAttribute('hidden', true)
    }
});

票数 0

Stack Overflow用户

发布于 2021-06-18 06:34:27

首先，我编辑了select选项的值如下：

<select class="target" id="target_select" form="fbday" name="target" (onChange)="showHideIntake($event)">
<option value="0">Stile di vita / Attività fisica</option>
<option id="mass1" name="radsa" value="5">mass1</option>
<option id="mass2" name="radsa" value="10">mass2</option>
<option id="mass3" name="radsa" value="15">mass3</option>
<option id="def1" name="radsa" value="-10">def1</option>
<option id="def2" name="radsa" value="-15">def2</option>
<option id="def3" name="radsa" value="-20">def3</option>
</select>

其次，我将一个名为(onChange)的事件添加到select元素中，如前一点的第一行所示。

第三，我在select元素中添加了一个select来处理(onChange)事件，如下所示：

const target_select = document.querySelector('#target_select');
const dayli_intake_mass = document.querySelector('#dayli_intake_mass');
const dayli_intake_def = document.querySelector('#dayli_intake_def');
target_select.addEventListener('change', (event) => {
  console.log(+event.target.value); // just for checking selected option
  // the + (plus sign) is to convert from string to number
  dayli_intake_mass.hidden = dayli_intake_def.hidden = true;
  event.target.value > 0 ? dayli_intake_mass.hidden = false : 
  dayli_intake_def.hidden = false;
});