Как изменить тег <select>на <input>в jQuery - PullRequest
Новая
       12

Как изменить тег <select>на <input>в jQuery

3 голосов
/ 25 апреля 2011

Ну, я ищу код jQuery.

я делаю выбор 

<select id="questionBox"  name="questionBox">
      <option selected="selected" value="-">------------------------</option>
      <option value="Create your own question">Create your own question</option>
      <option value="-">------------------------</option>
      <option value="What is your mothers name?">What is your mothers name?</option>
      <option value="What is your fathers name?">What is your fathers name?</option>
      <option value="What is your pet name?">What is your pet name?</option>
</select>

Я просто хочу, чтобы, когда кто-то щелкнул «Создать свой вопрос», это поле выбора изменилось на поле ввода, чтобы пользователь мог легко определить свой собственный вопрос.

пожалуйста, помогите мне решить эту проблему.

Спасибо.

1 Ответ

2 голосов
/ 25 апреля 2011

Показать текстовое решение

http://jsfiddle.net/2WB6M/

Это не скрывает выбор, но показывает текстовое поле, когда выбран «Создать новый ...». Причина этого та же, что и у Джона в его комментарии.

HTML: 

<select id="questionBox"  name="questionBox">
      <option selected="selected" value="-">------------------------</option>
      <option value="Create your own question">Create your own question</option>
      <option value="-">------------------------</option>
      <option value="What is your mothers name?">What is your mothers name?</option>
      <option value="What is your fathers name?">What is your fathers name?</option>
      <option value="What is your pet name?">What is your pet name?</option>
</select>
<input type="text" id="newQuestion"/>

JavaScript: 

$(function() {
    $('#newQuestion').hide();

    $('#questionBox').change(function() {
        if ($(this).val() === 'Create your own question')
            $('#newQuestion').show();
        else
            $('#newQuestion').hide();
    });
});

Скрыть кнопку выбора и создания кнопки отмены

http://jsfiddle.net/qkhpr/1/

HTML: 

<select id="questionBox"  name="questionBox">
      <option selected="selected" value="-">------------------------</option>
      <option value="Create your own question">Create your own question</option>
      <option value="-">------------------------</option>
      <option value="What is your mothers name?">What is your mothers name?</option>
      <option value="What is your fathers name?">What is your fathers name?</option>
      <option value="What is your pet name?">What is your pet name?</option>
</select>
<div id="newQuestion">
    <input type="text"/>
    <button id="cancel">Cancel</button>
</div>

JavaScript: 

$(function() {
    $('#newQuestion').hide();

    $('#questionBox').change(function() {
        if ($(this).val() === 'Create your own question') {
            $('#newQuestion').show();
            $('#questionBox').hide();
        }
    });

    $('#cancel').click(function () {
        $('#questionBox').show();
        $('#newQuestion').hide();
    });
});
...