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

问题描述

帮助，

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

我相信我有一个修复程序，但我不一定确定如何对其进行编码.我正在寻求以下方面的帮助:当用户从下拉框中选择一个选项时，我希望此操作使用相应的值填充(隐藏)输入框.同样，如果用户从下拉列表中选择其他"选项，我希望输入框(现在可见)填充"，因为用户会自己填充此选项.

同样，我不确定如何编写这样的代码，我希望有人能指出我正确的方向.我真的很感谢任何帮助，我非常感谢你的时间.谢谢！

感谢您的帮助.这是我现在拥有的代码:

 <option value="20">$20</option><option value="10">$10</option><option value="5" selected="selected">$5</option><option value="otherField">其他</option></选择><div id="otherField">数量:<input type="text" id="amount" name="amount" class="textfield" size="10"/>
jquery 代码:
$(document).ready(function() {$.viewInput = {'0' : $([]),//这是包裹隐藏字段的DIV的名称'otherField' : $('#otherField'),};$('#otherFieldOption').change(function() {//如果在加载隐藏字段后选择了另一个下拉项，则隐藏输入字段$.each($.viewInput, function() { this.hide(); });//如果选中，则显示输入字段项$.viewInput[$(this).val()].show();});});
解决方案
这里是一个演示
<option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="other">other</option></选择><input type='text' id="other" class="hidden"/>

和 jquery 一起使用

$('#choice').change(function(){var selected_item = $(this).val()如果(selected_item ==其他"){$('#other').val("").removeClass('hidden');}别的{$('#other').val(selected_item).addClass('hidden');}});

Hellp,

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>

the jquery code:

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

});

解决方案

here is a 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" />

and jquery to go with

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

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

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