Question

我正在尝试使用三个或更多选择填充三个或输入。但它会粘贴前两个选择的值并忽略第三个值。

HTML

    <select id="field1" class="required" size="0">
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
    </select>
    <select id="field2" class="required" size="0">
        <option value="Eggs">Eggs</option>
        <option value="Shake">Shakes</option>
        <option value="Drink">Drinks</option>
    </select>


    <select id="field3" class="required" size="0">
        <option value="Billed">Billed</option>
        <option value="Unpaid">Unpaid</option>
        <option value="Service">Service</option>
    </select>
    <input name="tistle" type="text" id="inputter" value="">

JS

    var selectedField1 = "";
    jQuery('#field1').on('change', function () {
        jQuery("#inputter").val(jQuery("#field1").val());
        selectedField1 = jQuery("#field1").val();
    });

    jQuery('#field2').on('change', function () {
        var valuetwo = selectedField1
        jQuery("#inputter").val(valuetwo + ' ' + jQuery("#field2").val());
    });

    jQuery('#field3').on('change', function () {
        var valuethree = selectedField1 + valuetwo
        jQuery("#inputter").val(valuethree + jQuery("#field3").val());
    });

小提琴：http://jsfiddle.net/vr3mv9n8/

我有什么遗失的吗？

Answer 1

变量valuetwo不是全局的。但总的来说，将jQuery选择存储到变量中会更容易。像那样

var $F1 = jQuery('#field1');
var $F2 = jQuery('#field2');
var $F3 = jQuery('#field3');
var $In = jQuery("#inputter");

var selectedField1 = "";
$F1.on('change', function () {
    $In.val($F1.val());
});

$F2.on('change', function () {
    $In.val($F1.val() + ' ' + $F2.val());
});

$F3.on('change', function () {
    $In.val($F1.val() + ' ' + $F2.val() + ' ' + $F3.val());
});

Answer 2

关于第三个选择的代码中的问题是由于对 valuetwo 变量的引用，该变量超出了范围。换句话说， valuetwo 并不存在于jQuery('#field2').on(...)片段之外（请记住，JavaScript的变量具有函数范围）。

其他两个选择工作，因为selectedField1是从.on()函数定义的（类似于全局变量）。我已修改了一些代码以向您显示行为：

    var selectedField1 = "";
    var valuetwo = '';
    var valuethree = '';

    jQuery('#field1').on('change', function () {
        jQuery("#inputter").val(jQuery("#field1").val());
        selectedField1 = jQuery("#field1").val();
    });

    jQuery('#field2').on('change', function () {
        valuetwo = jQuery("#field2").val();
        jQuery("#inputter").val(selectedField1 + ' ' + valuetwo);
    });

    jQuery('#field3').on('change', function () {
        valuethree = jQuery("#field3").val();
        jQuery("#inputter").val(selectedField1 + ' ' + valuetwo + ' ' + valuethree);
    });

Answer 3

您无法在第三个功能中访问valuetwo，因为它是第二个功能的本地功能。您还要将第一个值分配到valuetwo，然后在第三个值中重复第一个值两次。检查更新的代码。

＆＃13;

var selectedField1 = "";
var valueone = "";
var valuetwo = "";
var valuethree = "";
    jQuery('#field1').on('change', function () {
        valueone = jQuery("#field1").val();
        jQuery("#inputter").val(valueone + ' ' + valuetwo + ' ' + valuethree);
    });

    jQuery('#field2').on('change', function () {
        valuetwo = jQuery("#field2").val();
        jQuery("#inputter").val(valueone + ' ' + valuetwo + ' ' + valuethree);
    });

    jQuery('#field3').on('change', function () {
        valuethree = jQuery("#field3").val();
        jQuery("#inputter").val(valueone + ' ' + valuetwo + ' ' + valuethree);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field1" class="required" size="0">
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
    </select>
    <select id="field2" class="required" size="0">
        <option value="Eggs">Eggs</option>
        <option value="Shake">Shakes</option>
        <option value="Drink">Drinks</option>
    </select>


    <select id="field3" class="required" size="0">
        <option value="Billed">Billed</option>
        <option value="Unpaid">Unpaid</option>
        <option value="Service">Service</option>
    </select>
    <input name="tistle" type="text" id="inputter" value="">

＆＃13;

从Select中填充单个输入

3 个答案: