更改输入框的下拉框中的选项答案

【问题标题】：option in dropdown box that changes an input box更改输入框的下拉框中的选项
【发布时间】：2011-08-03 12:14:09
【问题描述】：

求助，

我正在为我的页面开发一个在线捐赠网站。我希望用户有一个带有付款选项（5 美元、10 美元、20 美元、其他）的下拉框。如果选择了“其他”选项，我目前已将其设置为显示输入框的位置；如果选择了另一个选项（$5、$10、$20），则隐藏输入框。此外，捐款是通过 pay-pal 进行的，我已将 Pay-Pal 捐款按钮/php 整合到网站中。我遇到了以下问题：因为输入框是填充捐赠金额的字段，Pay-Pal 无法识别下拉金额。例如，如果我选择“其他”选项，在输入框中输入 100 美元，然后从下拉框中选择“10 美元”选项（假设我改变主意，想捐赠 10 美元而不是 100 美元），然后单击捐赠按钮，Pay-Pal 以 100 美元而不是 10 美元处理付款（因为它是从输入框中提取的）。

我相信我有一个修复，但我不一定确定如何编码。我正在寻求以下帮助：当用户从下拉框中选择一个选项时，我希望此操作使用相应的值填充（隐藏）输入框。同样，如果用户从下拉列表中选择“其他”选项，我希望输入框（现在可见）填充“”，因为用户将自己填充此选项。

再次，我不确定如何编写这样的代码，我希望有人能指出我正确的方向。我真诚地感谢任何帮助，我非常感谢您的时间。谢谢！

编辑：感谢您的帮助。这是我现在拥有的代码：

    <select name="amount" id="otherFieldOption" class="dropdown">
                    <option value="20">$20</option>
            <option value="10">$10</option>
            <option value="5" selected="selected">$5</option>
            <option value="otherField">Other</option>   
    </select>

    <div id="otherField">
        Amount:
        <input type="text" id="amount" name="amount" class="textfield" size="10"/>
    </div>

jquery 代码：

$(document).ready(function() {
  $.viewInput = {
    '0' : $([]),
    //THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
    'otherField' : $('#otherField'),
  };

$('#otherFieldOption').change(function() {
    // HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
    $.each($.viewInput, function() { this.hide(); });
    // SHOWS THE INPUT FIELD ITEM IF SELECTED
    $.viewInput[$(this).val()].show();
  });

});

【问题讨论】：

伊万，欢迎来到 stackoverflow ！如果我们要帮助您，我们将需要查看您的一些代码，以便我们可以看到您做错了什么并告诉您如何纠正它

标签： jquery onchange drop-down-menu inputbox

【解决方案1】：

<label>Donetion:</label>
    <input list="browsers" name="myBrowser" placeholder="Donetion" />
    <datalist id="browsers">
    <option value="$5">
    <option value="$15">
</datalist>

【讨论】：

添加解释可以更好地理解为什么它是一个好的解决方案。

【解决方案2】：

这是demo

<select id="choice">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
        <option value="other">other</option>
</select>
<input type='text' id="other" class="hidden" />

和jquery一起去

$('#choice').change(function(){
    var selected_item = $(this).val()

    if(selected_item == "other"){
        $('#other').val("").removeClass('hidden');
    }else{
        $('#other').val(selected_item).addClass('hidden');
    }
});

【讨论】：

这几乎正是我所需要的；但是，当用户选择“其他”时，我希望输入框清晰，现在它输入文本（即：“其他”）而不是“”。希望这是有道理的，关于如何实施这一改变的任何想法？这几乎正是我所需要的。谢谢

【解决方案3】：

~~当用户点击选择框时清除文本框。~~

试试这个：

<select id="moneySelect" onchange="$('#moneyText').val(''); $('#sendValue').val(this.value);">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
</select>
<input type='text' id="moneyText" onkeypress="$('#sendValue').val(this.value)">
<input type="hidden" name="sendValue" id="sendValue" />

【讨论】：