Javascript 将输入值保存在反应变量（Meteor）中

根据用户的选择，我使用反应式变量来管理输入字段的可见性。但当我选择一个选项时，在显示的输入中写入任何内容，然后转到第二个选项，最后当我回到第一个选项时，输入值消失。有没有办法保留该数据直到按下确认按钮确认所有选项下的所有字段值

设置选项后，将显示两个输入组：

   <template name="addTour">
   <label class="control-label col-xs-4" for="tour-dropdown">Программа</label>
<div class="dropdown col-xs-8 form-group form-horisontal">
    <select class="form-control" id="tour-dropdown">
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
</div>
{{#if a}}
<div class="container-fluid">
{{> textfield label='a option' id='transfer-city-from'}}
{{> confirm add='a option'}}
</div>
{{/if}}
{{#if b}}
<div class="container-fluid">
{{> textfield label='b option' id='transfer-city-from'}}
{{> confirm add='b option'}}
</div>
{{/if}}

或者我最好使用display:block和display:none？

---

提前感谢您的建议。

因此，我设法解决了jQuery及其隐藏/显示选项的问题

代码如下：

<template name="addTour">
<label class="control-label col-xs-4" for="tour-dropdown">Программа</label>
<div class="dropdown col-xs-8 form-group form-horisontal">
    <select class="form-control" id="tour-dropdown" >
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
</div>


    <div class="container-fluid" id="a">
    <div class="row">
        <div class="col-sm-4">
            <form class='form-horizontal'>
                <div class="form-group">
                    <h1>A option</h1>
                    {{> timepicker label='время прибытия' id='transfer-time-a'}}
                </div>
            </form>
        </div>
    </div>
</div>


    <div class="container-fluid" id="b">
    <div class="row">
        <div class="col-sm-4">
            <form class='form-horizontal'>
                <div class="form-group">
                    <h1>B option</h1>
                    {{> timepicker label='время прибытия' id='transfer-time-b'}}
                </div>
            </form>
        </div>
    </div>
</div>

---

它工作正常，并将值保存在所有隐藏的输入中，因此我可以一次性提交所有输入。

看来您已经外包了对理解问题至关重要的数据。请在问题本身中发布所有相关代码、图像和资源，如果链接消失或更改，您的问题将失去大部分（如果不是全部）含义！您可以将问题添加到所需信息中。请注意，在您的链接中，示例并不是最小的。请包含重现您的问题所需的尽可能少的代码量。我看了您的要点-我最初的感觉是，您可以使这更简单。干的首先，由于您的选择是单选的，所以您只需要一个被动变量来保持选择状态，而不是其中的8个。对于您的问题本身，如果您在空格键中使用{{if}}显示/隐藏html，那么这些元素实际上会与元素中的任何数据一起从DOM中添加或删除。您是对的，您最好使用display:none来控制可见性。如果您需要8种形式的变体，或者您可以将其中的一些抽象为数据，您甚至可能需要重新考虑。我应该花更多的时间学习。谢谢你，米歇尔。现在我对空格键的工作原理有了更多的了解。。据我所知，我最好使用display:none和jQuery来完成这项工作，对吗？或者我还可以在某种程度上使用反应式变量？对不起，我没有得到关于摘要和数据的建议，我在很多情况下仍然是业余爱好者。

<template name="addTour">
<label class="control-label col-xs-4" for="tour-dropdown">Программа</label>
<div class="dropdown col-xs-8 form-group form-horisontal">
    <select class="form-control" id="tour-dropdown" >
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
</div>


    <div class="container-fluid" id="a">
    <div class="row">
        <div class="col-sm-4">
            <form class='form-horizontal'>
                <div class="form-group">
                    <h1>A option</h1>
                    {{> timepicker label='время прибытия' id='transfer-time-a'}}
                </div>
            </form>
        </div>
    </div>
</div>


    <div class="container-fluid" id="b">
    <div class="row">
        <div class="col-sm-4">
            <form class='form-horizontal'>
                <div class="form-group">
                    <h1>B option</h1>
                    {{> timepicker label='время прибытия' id='transfer-time-b'}}
                </div>
            </form>
        </div>
    </div>
</div>

Dropdown = $('#tour-dropdown');
$('#a').hide();
$('#b').hide();
select = this.value;
Dropdown.change(function() {
    if ($(this).val() === 'a') {
        $('#a').show();
        console.log('A option');
    } else $('#a').hide();
    if ($(this).val() === 'b') {
        $('#b').show();
        console.log('B option');
    } else $('#b').hide();// hide div if value is not "custom"
});