ฉันจะตั้งค่าองค์ประกอบของกล่องเลือกโดยใช้โปรแกรมได้อย่างไรโดยใช้ JavaScript?

ฉันมี<select>องค์ประกอบHTML ต่อไปนี้:

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

การใช้ฟังก์ชั่น JavaScript ที่มีleaveCodeหมายเลขเป็นพารามิเตอร์ฉันจะเลือกตัวเลือกที่เหมาะสมในรายการได้อย่างไร

คุณสามารถใช้ฟังก์ชั่นนี้:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

หากคุณใช้ jQuery คุณสามารถทำสิ่งนี้ได้:

$('#leaveCode').val('14');

สิ่งนี้จะเลือก<option>ด้วยค่า 14

ด้วย Javascript ธรรมดาคุณสามารถทำได้สองDocumentวิธี :

• ด้วยdocument.querySelectorคุณสามารถเลือกองค์ประกอบตามตัวเลือก CSS:

  document.querySelector('#leaveCode').value = '14'

• การใช้วิธีการที่เป็นที่ยอมรับมากขึ้นdocument.getElementById()ซึ่งจะช่วยให้คุณสามารถเลือกองค์ประกอบตามid:

  document.getElementById('leaveCode').value = '14'

คุณสามารถเรียกใช้โค้ดด้านล่างเพื่อดูวิธีการเหล่านี้และฟังก์ชั่น jQuery:

const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}

input {
  display:block;
  margin: 10px;
  padding: 10px
}

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

ไม่ตอบคำถาม แต่คุณยังสามารถเลือกตามดัชนีโดยที่ i คือดัชนีของรายการที่คุณต้องการเลือก:

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

นอกจากนี้คุณยังสามารถวนซ้ำไอเท็มเพื่อเลือกโดยแสดงค่าด้วยลูป:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

ฉันเปรียบเทียบวิธีการต่าง ๆ :

เปรียบเทียบวิธีต่างๆในการตั้งค่าการเลือกด้วย JS หรือ jQuery

รหัส:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);
});

เอาต์พุตบนตัวเลือกที่มีองค์ประกอบ ~ 4000:

• 1 มิลลิวินาที
• 58 ms
• 612 มิลลิวินาที

ด้วย Firefox 10 หมายเหตุ: เหตุผลเดียวที่ฉันทำแบบทดสอบนี้ก็คือเพราะ jQuery มีประสิทธิภาพต่ำมากในรายการของเราที่มี ~ 2000 รายการ (พวกเขามีข้อความยาวกว่าระหว่างตัวเลือก) เรามีเวลาประมาณ 2 วินาทีหลังจาก val ()

หมายเหตุเช่นกัน: ฉันกำลังตั้งค่าขึ้นอยู่กับมูลค่าจริงไม่ใช่ค่าข้อความ

document.getElementById('leaveCode').value = '10';

ที่ควรตั้งค่าการเลือกเป็น "ลาประจำปี"

ฉันได้ลองใช้ JavaScript / jQuery-based โซลูชั่นเช่น:

$("#leaveCode").val("14");

และ

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

ในแอป AngularJS ที่มีความจำเป็นต้องใช้ <select> องค์ประกอบ

ไม่สามารถใช้งานได้เนื่องจากไม่ได้ทำการตรวจสอบความถูกต้องของแบบฟอร์ม AngularJS แม้ว่าจะมีการเลือกตัวเลือกที่ถูกต้อง (และแสดงในแบบฟอร์ม) อินพุตยังคงไม่ถูกต้อง ( คลาสng-pristineและคลาสng- ไม่ถูกต้องยังคงปรากฏอยู่)

หากต้องการบังคับใช้การตรวจสอบ AngularJS ให้โทร jQuery change ()หลังจากเลือกตัวเลือก:

$("#leaveCode").val("14").change();

และ

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

วิธีที่ง่ายที่สุดถ้าคุณต้องการ:
1) คลิกปุ่มที่กำหนดตัวเลือกที่เลือก
2) ไปที่หน้าอื่นโดยที่ตัวเลือกที่เลือกคือ
3) ให้เลือกค่าตัวเลือกนั้นในหน้าอื่น

1)ลิงก์ปุ่มของคุณ (พูดในหน้าแรก)

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(โดยที่contact.phpเป็นหน้าของคุณที่มีตัวเลือกให้เลือกหมายเหตุ url หน้ามี? option = 1 หรือ 2)

2)ใส่รหัสนี้ในหน้าสองของคุณ (my case contact.php )

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

3)เลือกค่าตัวเลือกขึ้นอยู่กับปุ่มที่คลิก

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. และอื่น ๆ
ดังนั้นนี่เป็นวิธีที่ง่ายในการส่งผ่านค่าไปยังหน้าอื่น (ด้วยรายการตัวเลือกที่เลือก) ผ่าน GET ใน url ไม่มีรูปแบบไม่มีรหัส .. เพียง 3 ขั้นตอนและทำงานได้อย่างสมบูรณ์แบบ

ทำไมไม่เพิ่มตัวแปรสำหรับ Id ขององค์ประกอบและทำให้มันเป็นฟังก์ชั่นที่ใช้ซ้ำได้?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}

สมมติว่าแบบฟอร์มของคุณชื่อform1 :

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i<lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}

ควรเป็นบางสิ่งบางอย่างตามบรรทัดเหล่านี้:

function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
  if (dl.options[i].value == inVal){
    el=i;
    break;
  }
}
dl.selectedIndex = el;
}

function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}

หากใช้ PHP คุณสามารถลองดังนี้:

$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';

switch($value) {
            case '10' :
                $first = 'selected';
            break;
            case '11' :
                $second = 'selected';
            break;
            case '14' :
                $third = 'selected';
            break;
            case '17' :
                $fourth = 'selected';
            break;
        }

echo'
<select id="leaveCode" name="leaveCode">
  <option value="10" '. $first .'>Annual Leave</option>
  <option value="11" '. $second .'>Medical Leave</option>
  <option value="14" '. $third .'>Long Service</option>
  <option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';

คุณน่าจะต้องการสิ่งนี้มากที่สุด:

$("._statusDDL").val('2');

หรือ

$('select').prop('selectedIndex', 3); 

ฉันเกรงว่าฉันไม่สามารถทดสอบได้ในขณะนี้ แต่ก่อนหน้านี้ฉันเชื่อว่าฉันต้องให้แท็ก ID แต่ละตัวเลือกจากนั้นฉันก็ทำสิ่งที่ชอบ:

document.getElementById("optionID").select();

ถ้านั่นไม่ได้ผลอาจจะทำให้คุณเข้าใกล้โซลูชันมากขึ้น: P