Firefox ละเว้นตัวเลือกที่เลือก =“ เลือก”

หากคุณเปลี่ยนเมนูแบบเลื่อนลงและรีเฟรชหน้าดูเหมือนว่า Firefox จะไม่สนใจแอตทริบิวต์ที่เลือก

<option selected="selected" value="Test">Test</option>

ในความเป็นจริงจะเลือกตัวเลือกที่คุณได้เลือกไว้ก่อนหน้านี้ (ก่อนรีเฟรช) สิ่งนี้กลายเป็นปัญหาสำหรับฉันเนื่องจากมีเหตุการณ์ที่เกิดขึ้นในเมนูแบบเลื่อนลงซึ่งจะเปลี่ยนแปลงสิ่งอื่น ๆ

มีวิธีทำให้ firefox หยุดพฤติกรรมนี้หรือไม่ (นอกเหนือจากการเริ่มทำงานเหตุการณ์อื่นเมื่อโหลดหน้าเว็บ)

AFAIK พฤติกรรมนี้ได้รับการเข้ารหัสใน Firefox

คุณสามารถลองตั้งค่าองค์ประกอบของฟอร์มแต่ละรายการเป็นแบบdefaultValueโหลดหน้า

เพิ่มautocomplete="off"แอตทริบิวต์ HTML ในทุกแท็กที่เลือก

(ที่มา: https://stackoverflow.com/a/8258154/260080 )

ใน firefox ฉันสังเกตเห็นว่าแอตทริบิวต์ "ที่เลือก" จะไม่ทำงานเว้นแต่คุณจะวางสิ่งที่เลือกไว้ในฟอร์มโดยที่ฟอร์มนั้นมีแอตทริบิวต์ชื่อ

เพิ่งมีปัญหาเดียวกันเชื่อฉันว่ามันใช้เวลามากกว่า 10 ชั่วโมงในการต่อสู้กับพฤติกรรม firefox ที่โง่เขลานี้ฉันมีรายการแบบเลื่อนลง 7 รายการแต่ละรายการจะเรียกเหตุการณ์และกรอกอินพุตที่ซ่อนอยู่ 24 รายการเพื่อให้คุณสามารถจินตนาการได้ว่ามีตัวเลือกที่ถูกต้องเลือกด้วย ใส่ผิด 24 ค่า !!! วิธีแก้ปัญหาในที่สุดที่ฉันพบคือการรีเซ็ตแบบฟอร์มด้วย Javascript เพิ่มบรรทัดของรหัสนี้:

window.onload = function() { document.forms['MarkerForm'].reset(); };

PS: อินพุตมีค่าที่ดึงมาจากฐานข้อมูลดังนั้นการรีเซ็ตแบบฟอร์มจะไม่ทำให้ค่าใด ๆ ว่างเปล่า แต่เป็นการบอกให้ firefox กลับนรกไปที่ตัวเลือกที่เลือก = ตัวเลือกที่เลือก!

Firefox จะจดจำสิ่งที่คุณเลือกก่อนหน้านี้เมื่อรีเฟรช ลองรีเฟรชอย่างหนักแทน

นอกจากนี้ปัญหาเดียวกันที่นี่: https://stackoverflow.com/a/1505693/1069232

ดูได้ที่นี่: https://bugzilla.mozilla.org/show_bug.cgi?id=274795

พยายามปิดการใช้งานautocompleteแอตทริบิวต์ของอินพุตที่เลือก ... บางครั้งเบราว์เซอร์ก็เพิกเฉยselectเพราะเหตุนั้น

ฉันใช้ FF 25.0.1

มันไม่สนใจและselected=""selected="selected"

แต่ถ้าลองแค่selectedเลือกตัวเลือกนี้

พฤติกรรมแปลก ๆ (ไม่สอดคล้องกัน) ฉันรู้ว่าselectedเป็น HTML5 ที่ถูกต้องและเป็นรูปแบบที่สั้นที่สุด แต่ฉันมักจะเขียนโค้ดที่ตรวจสอบความถูกต้องของ XML ด้วยดังนั้นฉันจึงสามารถใช้เครื่องมือตรวจสอบ XML ใดก็ได้เพื่อตรวจสอบผลลัพธ์ของฉันอย่างเข้มงวด (และการแลกเปลี่ยนข้อมูลทำได้ง่ายมาก .. .)

ตาม W3C ตัวแปรเหล่านี้ควรใช้ได้กับแอตทริบิวต์บูลีน:

HTML5:  boolAttr="" | boolAttr="boolAttr" | boolAttr
XHTML5: boolAttr="" | boolAttr="boolAttr"

ฉันชอบตัวแรกเพราะมันเกือบจะสั้นเท่าตัวแปรสุดท้าย (ไม่ใช่ xml conformant) แต่ควรตรวจสอบความถูกต้องเป็นทั้ง XHTML5 และ HTML5 ดังนั้นฉันหวังว่า Mozilla จะแก้ไขได้!

ใช้. prop () แทน .attr ()

This does not work in firefox.
  $( 'option[value="myVal"]' ).attr( 'selected', 'selected' );
use this one
  $( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

In other way
  $( this ).prop( 'selected', 'selected' );

คุณสามารถโทรหา.reset()แบบฟอร์มก่อนที่จะรีเฟรชหน้า

ใส่เลือกในแอตทริบิวต์แบบฟอร์มและจะใช้งานได้

<!-- will not work in firefox -->
<option selected="selected" value="Test">Test</option>

และ

<!-- this will work in firefox -->
<form>
 <option selected="selected" value="Test">Test</option>
</form>

ลองตั้งชื่อแบบเลื่อนลง

ด้วยชื่อจะดีกว่า

form id="UMForm" name="UMForm" class="form"

การเลือกจะใช้แอตทริบิวต์ที่เลือก

การเติมข้อความอัตโนมัติก็ใช้ไม่ได้สำหรับฉันเช่นกัน

นี่คือโปรแกรมแก้ไข javscript ที่เขียนด้วย jquery ที่ฉันใช้:

$('input[type="radio"][selected]').click();

<option selected="selected" value="Test">Test</option>

ในกรณีนี้ใช้ได้ทั้งกับ Chrome และ Firefox

$('option[value="Test"]').prop('selected', true);

ฉันใช้.attr()แทน.prop()

หากต้องการแสดงรายการแรกของรายการแบบเลื่อนลงให้ใช้ ProjectName.ClearSelection();

วางบรรทัดในหน้าการออกแบบของคุณเพื่อทำงานบนเบราว์เซอร์ทั้งหมดและใส่สิ่งนี้ไว้ในโค้ดหลังการโหลดหน้า

$(document).ready(function () {
    $("#content_ProjectName option[value='1']").prop("selected", true);
});

สำหรับฉันวิธีแก้ปัญหาข้างต้นไม่ได้ผล ฉันต้องตั้งค่าการเลือกอย่างชัดเจนหากไม่มีการตั้งค่า:

if (foo.find(':selected').length === 0) {
    $(foo.find('option')[0]).attr('selected', 'selected');
}

หากคุณเปลี่ยนการเลือกและรีเฟรชหน้า Firefox จะคืนค่าการเปลี่ยนแปลงของคุณในแบบฟอร์มนั่นเป็นสาเหตุที่คุณรู้สึกว่าการเลือกไม่ทำงาน แทนที่จะรีเฟรชลองเปิดลิงก์ในแท็บใหม่

นี่คือทางออกของฉัน:

var select = document.getElementById('my_select');
for(var i=0; i < select.options.length; i++){
    select.options[i].selected = select.options[i].attributes.selected != undefined;
}

ฉันใส่ไว้ที่ด้านบนของหน้า (พร้อมชุดรหัสที่เหมาะสม) และมันก็เหมาะกับฉัน การแทนที่ getElementById ด้วยการวนซ้ำการเลือกทั้งหมดบนหน้าฉันปล่อยให้เป็นแบบฝึกหัดสำหรับผู้อ่าน;)

ในที่ทำงานฉันเพิ่งแก้ไขข้อบกพร่องที่ตัวเลือกกล่องเลือกแสดงอย่างถูกต้องใน Chrome แต่ไม่ใช่ใน Firefox บนหน้าเว็บเดียวกัน มันกลายเป็นสิ่งที่แตกต่างไปจากปัญหาข้างต้นอย่างสิ้นเชิง แต่อาจเป็นปัญหาที่คุณกำลังประสบอยู่

ใน Chrome สีแบบอักษรของกล่องเลือกคือสีดำ ด้วยเหตุผลบางประการใน Firefox กล่องเลือกจะสืบทอดสีแบบอักษรจากคอนเทนเนอร์ซึ่งเป็นสีขาว เมื่อฉันเพิ่มกฎ CSS เพื่อบังคับให้สีแบบอักษรของกล่องเลือกนั้นเป็นสีดำชุดค่าจะแสดงอย่างถูกต้อง

ไม่autocomplete="off"หรือวางไว้ในformผลงานสำหรับฉัน

สิ่งที่ทำงานคือการใช้เพียงแอตทริบิวต์ที่เลือกโดยไม่มีค่า ""เช่นนี้

<option @(Model.Source == TermSource.Instagram ? "selected" : "")>
    Instagram
</option>
<option @(Model.Source == TermSource.Facebook ? "selected" : "")>
    Facebook
</option>

ดังนั้นมันจึงแสดงผล<option selected>...</option>หรือเพียงแค่<option>...</option>