Question

在使用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;
    }
},

Answer 1

清除代码放在autofillResults方法中，当select更改时调用。 您可以通过清除存储其值的变量来清除输入。不要尝试直接对输入执行任何操作。输入应该是它变量的愚蠢反映。

更改下拉列值时，Javascript清除所有输入

1 个答案: