Question

我想根据select标签中选择的内容更改输入标签中的内容。

这是我的选择标记

<div class="form-group col-lg-4">
    <label for="donationType">Donation Type: &nbsp;</label> 
        <select id="donationType" style="text-transform: capitalize"
                name="volunteerProject.donationTypeId" class="form-control">
            <option value='0'>Select Donation Type</option>
                <s:iterator value="donationTypeList">
                    <option value='<s:property value="donationTypeId" />'
                        name='<s:property value="donationType" />'>
                <s:property value="donationType" />
            </option>
            </s:iterator>
        </select>
</div>

这是我的输入标签

<div class="form-group col-lg-3" id="vpDonateButtonLabelDiv">
    <label for="vpTitle">Button Label</label> <input
            type="text" class="form-control" id="vpDonateButtonLabel"
            name="volunteerProject.donateButtonLabel"
            placeholder="Enter button label" maxlength="50" required />
</div>

这是我的javascript代码

$('#donationType').change( function() {

var donationType = $(this).val();

    if (donationType != 0) {
        if (donationType == 1){
            $("#vpDonateButtonLabelDiv").append('Donate');
        } else if (donationType == 2) {
            $("#vpDonateButtonLabelDiv").append('Volunteer');
        } else if (donationType == 3) {
            $("#vpDonateButtonLabelDiv").append('Share');
        } else if (donationType == 5) {
            $("#vpDonateButtonLabelDiv").append('Tweet');
        }
    } else {
        $("#vpDonateButtonLabelDiv").append('');
    }
});

但是，它不起作用。我在这里想念的是什么？或者我的方法错了？非常感谢

Answer 1

我看到你已经使用了jQuery。您可以将$("#vpDonateButtonLabel").val替换为Top 10: Group1 Value1 Group1 Value2 Group1 Value3 .. Group1 Value 10 Buttom 10: Group1 Value1 Group1 Value2 Group1 Value3 .. Group1 Value 10，以便选择输入并编辑值。看到这个小提琴https://fiddle.jshell.net/8odoros/mzL24b5x/

Answer 2

您必须更改所使用的id，并且必须将append更改为val才能更改文字的值。

$('#donationType').change( function() {

var donationType = $(this).val();

    if (donationType != 0) {
        if (donationType == 1){
            $("#vpDonateButtonLabel").val('Donate');
        } else if (donationType == 2) {
            $("#vpDonateButtonLabel").val('Volunteer');
        } else if (donationType == 3) {
            $("#vpDonateButtonLabel").val('Share');
        } else if (donationType == 5) {
            $("#vpDonateButtonLabel").val('Tweet');
        }
    } else {
        $("#vpDonateButtonLabel").val('');
    }
});

用于直播演示click here

Answer 3

尝试将'.append'更改为'.value'？参考：Set the value of an input field

这是javascript，但你明白了。

编辑：错误的选择器也是。您应该更改文本框，但您的选择器是您的div。

尝试将$("#vpDonateButtonLabelDiv").append('Donate');更改为$("#vpDonateButtonLabel").val('Donate')。

Answer 4

要更改输入的文本，您可以执行以下操作：

$('#donationType').change( function() {
        var labels = ['', 'Donate', 'Volunteer', 'Share', 'Tweet' ]; //these could perhaps also be obtained from meta data?
        $('#vpDonateButtonLabel').val(labels[$(this).val()]);
});

但是我想知道你想改变标签文字吗？如果是这样，可以通过在div中查找生成的label元素来完成：$('#vpDonateButtonLabelDiv').children('label')并设置其文本。

$('#donationType').change( function() {
        var labels = ['', 'Donate', 'Volunteer', 'Share', 'Tweet' ]; //these could perhaps also be obtained from meta data?
        $('#vpDonateButtonLabelDiv').children('label').text(labels[$(this).val()]);
});

选择标记上的JavaScript更改功能

4 个答案: