опция в выпадающем списке, которая изменяет поле ввода

ProgramBox

опция в выпадающем списке, которая изменяет поле ввода

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#jquery #onchange #drop-down-menu #inputbox

#jquery #onchange #выпадающее меню #inputbox

Вопрос:

Черт возьми,

Я работаю над разработкой сайта онлайн-пожертвований для своей страницы. Я бы хотел, чтобы у пользователя было выпадающее окно с вариантами оплаты ($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();
  });

});

1. Иван, добро пожаловать в stackoverflow! если мы хотим вам помочь, нам нужно будет просмотреть часть вашего кода, чтобы мы могли понять, что вы делаете неправильно, и показать вам, как это исправить

Ответ №1:

вот демо

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

1. Это почти именно то, что мне нужно; однако, когда пользователь выбирает «другое», я бы хотел, чтобы поле ввода было чистым, на данный момент оно вводит текст (т. Е.: «другое») вместо «». Надеюсь, это имеет смысл, есть идеи о том, как реализовать это изменение? Это почти именно то, что мне нужно. Спасибо

Ответ №2:

~~Когда пользователь нажимает на поле выбора, очистите текстовое поле.~~

Попробуйте это:

 <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" />

Ответ №3:

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