ExternalHTML وتحديثات السمات

Question

أحاول الحصول على كود HTML كسلسلة مع تحديثات السمات.

لقد قمت select العلامة، التي أقوم بتحديث خياراتها باستخدام JavaScript.

بشكل افتراضي، الأول option يكون selected باستخدام سمة HTML selected="selected".

إذا قمت بفك selected من الخيار الأول باستخدام option1.selected = false وحدد option2.selected = true للمرة الثانية option, ، ثم اتصل بـ outerHTML من أ select, ، انا حصلت

<select>
    <option selected="selected">one</option>
    <option>two</option>
    <option>three</option>
  </select>

كما ترون، selected السمة لا تزال على الأول option, بينما تم نقله إلى الثاني option.النتيجة المتوقعة هي

<select>
    <option>one</option>
    <option selected="selected">two</option>
    <option>three</option>
  </select>

هنا مثال http://jsbin.com/adAbAMe/2/edit?html,js,console,output (انقر run with js للحصول على نتيجة) مما يدل على أنه إذا كان أ selected تم تغيير السمة، ولا تتغير في كود HTML.

لكني أحتاج إلى الحصول على HTML النهائي من ExternalHTML مع تحديثات السمات الناجحة، لأنه إذا قمت بنقل هذا select في مكان ما لن أحصل على أي تحديثات قمت بها قبل استخدام JavaScript.

هل هناك أي طريقة للحصول على HTML كسلسلة بقيم السمات الحقيقية؟

Answer 1

ال selected لا يتم تحديث السمة تلقائيًا، ولكن يمكنك ضبطها لإزالتها وإضافتها إلى العناصر المناسبة.

//remove "selected" from first
if (i==0) {
  option.selected = false;
  option.removeAttribute("selected");
}

//add "selected" to second
if (i==1) {
  option.selected = true;
  option.setAttribute("selected", "selected");
}

وهنا كمان العمل.

Answer 2

يمكنك استخدام

option.setAttribute('selected', 'selected');

و

option.removeAttribute('selected');

Answer 3

يحاول

$('button').click(function () {
    console.log($('select').prop('outerHTML'))
})

$('select').change(function(){
    $(this).find('option[selected]').removeAttr('selected');
    $(this).find('option:selected').attr('selected', 'selected');
})

العرض التوضيحي: كمان

Answer 4

من مواصفات دوم:

المحدد من النوع منطقية

يمثل الحالة الحالية لعنصر تحكم النموذج المقابل، في وكيل مستخدم تفاعلي.يؤدي تغيير هذه السمة إلى تغيير حالة عنصر تحكم النموذج، ولكن لا يغير قيمة سمة HTML المحددة للعنصر.

(التأكيد على الألغام)

للحصول على التأثير الذي تبحث عنه، تريده option.setAttribute('selected', 'selected'), ، على الرغم من أنك ستحتاج أيضًا option.removeAtrribute('selected') على الخيارات الأخرى.