Блог

Главная - Вопросы по программированию - ОПУБЛИКУЙТЕ что-нибудь, используя редактируемый выпадающий список

ОПУБЛИКУЙТЕ что-нибудь, используя редактируемый выпадающий список

#php #html

#php #HTML

Вопрос:

Я создал редактируемое выпадающее меню :

 <html>
<body>
<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
    <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;" onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">

        <option></option>
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>

    </select>
    <input type="text" name="displayValue" placeholder="add/select a value" id="displayValue" style="position:absolute;top:0px;left:0px;width:183px;width:180px9;#width:180px;height:23px; height:21px9;#height:18px;border:1px solid #556;" onfocus="this.select()">
    <input type="hidden" name="idValue" id="idValue">
</div>
</body>
</html>

Я хочу опубликовать добавленное значение, чтобы включить его в выпадающий список для следующего раунда.

Комментарии:

1. «Поля со списком», подобные тому, который вы пытаетесь создать, плохо поддерживаются в HTML. Я бы рекомендовал иметь опцию «другое» в вашем выпадающем меню и использовать отдельное текстовое поле под ним.

Ответ №1:

Я предлагаю вам использовать jQuery для упрощения реализации. Вы можете обернуть их в form и выполнить POST редактирование через jQuery Ajax , затем сохранить это значение где-нибудь для будущего использования, а затем добавить его к следующему в качестве нового option элемента.

ОПУБЛИКОВАТЬ через aJax

 $(function() {
    $('#form').on('submit', function(e) {
        // do not reload the page
        e.preventDefault();

        // do the posting
        var newValue = $('#displayValue').val();

        $.post('http://MYURL.com/post.php', {
            new_field: newValue
        }, function(data) {
            // success callback
            $('#form > select').append('<option value="' newValue '">' newValue '</option>');
        })
    });
})

По сути, вы размещаете newValue в http://MYURL.com/post.php и обрабатываете эти новые данные, после чего success обратный вызов обработает вставку нового значения в ваш select .

код не протестирован, дайте мне знать, если он не сработал

Узнайте больше о jquery.post() здесь и больше о jquery здесь