選擇標籤上的JavaScript更改功能

我想根據選擇標籤中選擇的內容更改輸入標籤中寫入的內容。選擇標籤上的JavaScript更改功能

這是我的選擇標籤

<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(''); 
    } 
});

但是，它不工作。我在這裏錯過了什麼？或者我的方法錯了？非常感謝

來源

2016-07-08 chiliflavor

你必須改變你使用的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

來源

2016-07-08 08:01:52

這正是我所需要的，但即使我遵循了你提到的內容，它也不起作用。我會仔細檢查我的後端過程，謝謝！ – chiliflavor

我還在我的答案中提供了演示鏈接。如果您對此處有任何疑問而不是評論。 –

終於！現在一切正在進行中，問題在於我的瀏覽器無法識別我所做的最近更改。我清空緩存並重新加載瀏覽器後解決了問題。非常感謝@kalpesh！ – chiliflavor

嘗試將'.append'更改爲'.value'？參考：Set the value of an input field

這是在JavaScript中，但你明白了。

編輯：錯誤的選擇器。你應該改變文本框，但你的選擇器是你的div。

嘗試更改$("#vpDonateButtonLabelDiv").append('Donate');至$("#vpDonateButtonLabel").val('Donate')。

來源

2016-07-08 07:50:07

你'對，我應該改變輸入區域。它仍然無法正常工作。我剛纔也檢查過這個鏈接，謝謝 – chiliflavor

它發佈了什麼錯誤嗎？試試： '$（input [name =「volunteerProject.donateButtonLabel」]）'作爲您的文本框選擇器 –

我看到你已經使用了jQuery。您可以用替換$("#vpDonateButtonLabelDiv").append以選擇輸入並編輯該值。看到這個小提琴https://fiddle.jshell.net/8odoros/mzL24b5x/

來源

2016-07-08 07:59:29

改變輸入的文字，你可以這樣做：

$('#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()]); 
});

來源

2016-07-08 08:01:21

嗯。我想改變'input'標籤中寫的內容。這甚至有可能嗎？ – chiliflavor

你是指文本框內的文字？ –

是的！每當我從'select'標籤中選擇另一個選項時，它就會隨時更改 – chiliflavor

選擇標籤上的JavaScript更改功能

回答

相關問題