选项在下拉框中更改输入框 [英] option in dropdown box that changes an input box

问题描述

Hellp，

我正在为我的网页开发一个在线捐赠网站。我希望用户有一个支付选项的下拉框（$ 5，$ 10，$ 20，Other）。如果选择了其他选项，我现在将其设置为显示输入框的位置;如果选择了另一个选项（$ 5，$ 10，$ 20），则隐藏输入框。此外，捐款是通过支付宝支付，我已经将Pay-Pal捐赠按钮/ php纳入该网站。我遇到了以下问题：因为输入框是填充捐赠金额的字段Pay-Pal无法识别下拉金额。例如，如果我选择其他选项，请在输入框中输入$ 100，然后从下拉框中选择$ 10选项（让我们假设我改变了主意，想捐赠$ 10而不是$ 100），然后点击捐赠按钮，Pay-Pal处理付款$ 100而不是$ 10（因为它从输入框拉）。

I am working on developing an online donation site for my page. I'd like the user to have a dropdown box with payment options ($5, $10, $20, Other). I've currently set it up to where it displays an input box if the "other" option is selected; if another option is selected ($5, $10, $20) then the input box is hidden. Furthermore, donations are taken via pay-pal and I've incorporated the Pay-Pal donate button/php into the site. I've run across the following issue: because the input box is the field that populates the amount that is being donated Pay-Pal does not recognize the dropdown amounts. For example, if I choose the "Other" option, enter $100 into the input box, then select the "$10" option from the dropdown box (let's assume I changed my mind and wanted to donate $10 instead of $100), and click the donate button, Pay-Pal processes the payment for $100 not $10 (because it's pulling from the input box).

我相信我有一个修复，但我不是必须确定如何编写代码。我正在寻找以下帮助：当用户从下拉框中选择一个选项时，我希望此操作使用相应的值填充（隐藏）输入框。同样，如果用户从下拉菜单中选择其他选项，我希望输入框（现在可见）填充，用户将填充此选项他/她自己。

I believe I have a fix, but I'm not necessarily sure how to code it. I am looking for help with the following: When a user selects an option from the dropdown box I would like this action to populate the (hidden) input box with the respective value. Similarly, if the user selects the "other" option from the dropdown, I'd like the input box (now visible) to be populated with "" as the user would populate this option him/her-self.

再次，我不知道如何编写这样的东西，我希望有人能指出我的方向正确。我真的非常感谢任何帮助，我非常高兴你的时间。谢谢！

Again, I'm not certain how to code something like this, and I'm hopeful someone could point me in the right direction. I really sincerely appreciate any help, and I'm very gareful for your time. Thank you!

编辑：谢谢你的帮助。这是我现在的代码：

edit: Thank you for your help. Here is the code that I have as of right now:

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

});

推荐答案

这里是一个 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');
    }
});

这篇关于选项在下拉框中更改输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！