Javascript在更改下拉值时清除所有输入答案

【问题标题】：Javascript clear all input when changing dropdown valueJavascript在更改下拉值时清除所有输入
【发布时间】：2018-05-12 21:57:43
【问题描述】：

当使用 JavaScript 更改下拉列表的值时，如何清除其他文本框？当我更改特定下拉列表中的值时，我希望清除已填写的其他文本字段。我正在使用 Vue.js 和 Laravel。

这是我的下拉菜单：

<div class="form-group col-md-2">
    <label for="value" class="control-label">Instruments</label>
    <div>
        <select name="instruments" class="form-control select sel-primary" v-model="instruction.instrument" v-on:change="autofillResult(instruction.putType)" >
            <option v-for="instrument in instruments" v-bind:value="instrument">
                @{{ instrument.name }}
            </option>
        </select>
    </div>
</div>

更改下拉值时要清除的字段：

<div class="form-group col-md-1">
    <label for="strike" class="control-label">Strike</label>
    <input name="strike" type="number" v-model="instruction.strike" class="form-control"  :disabled="instruction.putType == 'Future'">
</div>

<div class="form-group col-md-1">
    <label for="" class="control-label">Buy/Sell</label>
    <div>
        <div class="btn-group">
            <button name="buySellButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">@{{instruction.type}} <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li v-for="(val, key) in types"><a @click="selectBuyItem(val)">@{{ key }}</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="form-group col-md-1">
    <label for="Quantity" class="control-label">Quantity</label>
    <div>
        <input name="quantity" type="text" v-model="instruction.quantity" class="form-control">
    </div>
</div>

<div class="form-group col-md-1">
    <label for="" class="control-label">Price</label>
    <div>
        <input name="price" type="text" v-model="instruction.price" class="form-control">
    </div>
</div>

方法下的我的Vue代码：

autofillResult: function(item){
    var price = _.chain(this.latestprice).where({'InstrumentName':this.instruction.instrument.name, 'ContractDate': this.instruction.contract.contractDate}).pluck('Last').first().value();

    if(this.instruction.contract.strikeInterval != undefined){
        var str  =  this.instruction.contract.strikeInterval;
        this.instruction.strike = (Math.round(price / str))*str;
        this.instruction.price = price;
        this.instruction.quantity = 1;
    }
},

【问题讨论】：

您要清除文本字段吗？
你已经有一个onchange 的选择监听器，在那里你可以将其他输入的v-model 设置为一个空字符串......例如：this.instruction..price = ''
我不确定如何构造 if 语句，即当下拉列表更改时，值必须清除
@CasperSL 是的，我想清除文本框

标签： javascript html laravel vue.js

【解决方案1】：

您可以像下面这样清空autofillResult() 中的文本字段，

autofillResult: function(item){
  //add all text fields here
  this.instruction.price = "";
}

【讨论】：

【解决方案2】：

The clearing code goes in your autofillResults method, called when the select changes. 通过清除存储其值的变量来清除输入。不要尝试直接对输入执行任何操作。输入应该是它的变量的愚蠢反映。

【讨论】：