none
Jquery.html() select, input RRS feed

  • Вопрос

  • Как получить текущий html через или без Jquery, через Document тоже не выходит.

    Простой пример, чтобы понять о чем я:

    <select id="qwe">
            <option value=""></option>
            <option selected="selected" value="1">One</option>
            <option value="2">Two</option>
     </select>
    Если вызвать $("#qwe").html(), то я тоже самое получу, но если изменить значение с One на Two в интерфейсте,

    то $("#qwe").html() -> будет выдавать предыдущее значение

    Я пытаюсь скопировать строку через Clone() -> и получаю старые значения Input`ов, Select`ов и т.д.

    Мне нужно получить именно текущий html через id или селектор, помогите пож-та


    • Изменено Tical Yeap 30 сентября 2016 г. 9:25
    30 сентября 2016 г. 8:37

Ответы

  • Еле как разобрался и написал, не все так страшно как я думал.

    Данная функция будет полезна:

    $("input, select, textarea").each(function () {
                    var $this = $(this);
                    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) {
                        if ($this.prop("checked")) {
                            $this.attr("checked", "checked");
                        } else {
                            $this.removeAttr("checked");
                        }
                    } else {
                        if ($this.is("select")) {
                            $this.find(":selected").attr("selected", "selected");
                            $this.find(":not(:selected)").removeAttr("selected");
                        } else {
                            $this.attr("value", $this.val());
                        }
                    }
                });

    3 октября 2016 г. 8:12

Все ответы

  • Привет! Ну, вот как минимум 2 варианта с использованием jQuery:

    Либо выбирай текущий элемент option в селекторе, и получай его значение:

    $("#qwe option:selected").text();

    Либо выбирай сам селектор и получай его значение:

    $("#qwe").val();

    30 сентября 2016 г. 16:37
  • В первом случае получу "Two", во втором получу "2", а хочу получить:

    <select id="qwe">
            <option value=""></option>
            <option value="1">One</option>
            <option selected="selected"value="2">Two</option>
     </select>

    У меня там строка на всю длину экрана, много селектов, текст ареа, инпуты и т.д. Не хочется все вручную делать


    3 октября 2016 г. 4:41
  • Тогда вот так:

    $("#qwe").get(0).outerHTML

    3 октября 2016 г. 4:49
  • Тогда я получу:

    <select id="qwe">
            <option value=""></option>
            <option selected="selected" value="1">One</option>
            <option value="2">Two</option>
        </select>

    А хочется текущий html:

    <select id="qwe">
            <option value=""></option>
            <option value="1">One</option>
            <option selected="selected" value="2">Two</option>
        </select>

    3 октября 2016 г. 5:00
  • Занятненько =)

    А если так:

    $('<div>').append($('#qwe').clone()).html();


    • Изменено JusteG 3 октября 2016 г. 5:06
    3 октября 2016 г. 5:05
  • То получим:

    <select id="qwe">
            <option value=""></option>
            <option selected="selected" value="1">One</option>
            <option value="2">Two</option>
        </select>

    Это был мой первоначальный вариант. 

    3 октября 2016 г. 6:05
  • Извиняюсь за свою невнимательность. Я не знаю почему так происходит. Мб jQuery как то кэширует DOM, для того что бы быстрее с ним работать? Теряюсь в догадках. Попробуй дернуть элемент без использования оного. Если и этот вариант не сработает - я сдаюсь. Но мне крайне интересно будет узнать ответ.

    document.getElementById('qwe').outerHTML



    • Изменено JusteG 3 октября 2016 г. 6:13
    3 октября 2016 г. 6:10
  • В описании я уже писал, через Document тоже самое((
    3 октября 2016 г. 6:18
  • Не совсем понимаю, вы что, ожидайте что этот атрибут изменится при выборе какого либо значения? Так этого не будет, ведь данный атрибут определяет значение которое будет выбрано при загрузке станицы, выбор других значений его не изменит и HTML всегда будет таким как он был что бы вы не выбрали. 

    Для получения текущего значения используйте свойство value.


    This posting is provided "AS IS" with no warranties, and confers no rights.

    3 октября 2016 г. 6:46
    Модератор
  • Если я все правильно понял, он ожидает получить текущий html. Так, как он отображается если нажать F12 и посмотреть на код страницы после выбора какого ни будь элемента в select.
    3 октября 2016 г. 6:49
  • Если я все правильно понял, он ожидает получить текущий html. Так, как он отображается если нажать F12 и посмотреть на код страницы после выбора какого ни будь элемента в select.
    Он и получит текущий HTML. Только вот этот HTML не зависит от выбранного значения. 

    This posting is provided "AS IS" with no warranties, and confers no rights.

    3 октября 2016 г. 6:50
    Модератор
  • Как так? Можно с этого момента поподробнее?
    3 октября 2016 г. 6:52
  • Хм, только что провел эксперимент - действительно так.

    http://joxi.ru/Vrw3YNVhKnV4kr

    http://joxi.ru/82QDeEZh1eD9vm

    Почему то я был уверен что html изменяется в зависимости от того что выбрано. Оказывается - нет. It's a magic =)



    • Изменено JusteG 3 октября 2016 г. 6:57
    3 октября 2016 г. 6:56
  • Вот вот, я сам в шоке, не ожидал такого поведения, работаю в крупной компании по разработке веб приложений и стаж не мал. Мы наверное не правильно понимаем принцип работы Jquery, думаю Ilya Tumanov прав. Но вопрос остается актуальным.

    Неужели мне нужно будет писать сложный алгоритм, который бы проходил по всем контролам и брал бы их значения. Разве нет просто функции брать текущий HTML((

    3 октября 2016 г. 7:24
  • Так Илья про то и говорит. HTML не изменяется. Посмотри скрины)
    3 октября 2016 г. 7:28
  • Еле как разобрался и написал, не все так страшно как я думал.

    Данная функция будет полезна:

    $("input, select, textarea").each(function () {
                    var $this = $(this);
                    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) {
                        if ($this.prop("checked")) {
                            $this.attr("checked", "checked");
                        } else {
                            $this.removeAttr("checked");
                        }
                    } else {
                        if ($this.is("select")) {
                            $this.find(":selected").attr("selected", "selected");
                            $this.find(":not(:selected)").removeAttr("selected");
                        } else {
                            $this.attr("value", $this.val());
                        }
                    }
                });

    3 октября 2016 г. 8:12