選擇標簽上的JavaScript更改功能

Question

我想根據選擇標記中選擇的內容更改輸入標記中寫的內容。

這是我的選擇標簽

<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。 您可以將$("#vpDonateButtonLabelDiv").append替換$("#vpDonateButtonLabel").val ，以選擇輸入並編輯值。 看到這個小提琴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('');
    }
});

現場演示請點擊這里

Answer 3

嘗試將“ .append”更改為“ .value”嗎？ 參考： 設置輸入字段的值

它在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中找到生成的標簽元素來實現： $('#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()]);
});