كيف أقوم بتعيين قيمة عنصر مربع التحديد برمجياً باستخدام JavaScript؟

https://stackoverflow.com/questions/78932

09-06-2019
|

سؤال

لدي HTML التالي <select> عنصر:

<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 number كمعلمة، كيف أحدد الخيار المناسب في القائمة؟

المحلول

SelectElement("leaveCode", valueToSelect)

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

نصائح أخرى

إذا كنت تستخدم jQuery، فيمكنك أيضًا القيام بذلك:

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

سيؤدي هذا إلى تحديد <option> بقيمة 14.

باستخدام جافا سكريبت العادي، يمكن تحقيق ذلك أيضًا باستخدام اثنين 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 مللي ثانية

612 مللي ثانية

مع فايرفوكس 10.ملحوظة:السبب الوحيد الذي دفعني إلى إجراء هذا الاختبار هو أن أداء jQuery كان سيئًا للغاية في قائمتنا مع ما يقرب من 2000 إدخال (كان لديهم نصوص أطول بين الخيارات).كان لدينا تأخير لمدة ثانيتين تقريبًا بعد val()

لاحظ كذلك:أقوم بتعيين القيمة اعتمادًا على القيمة الحقيقية، وليس قيمة النص

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

من المفترض أن يؤدي ذلك إلى تعيين التحديد على "الإجازة السنوية"

لقد قمت بتجربة الحلول المستندة إلى JavaScript/jQuery المذكورة أعلاه، مثل:

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

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

في تطبيق AngularJS، حيث كان هناك ملف مطلوب عنصر <اختر>.

لا يعمل أي منها، لأنه لم يتم تشغيل التحقق من صحة نموذج AngularJS.على الرغم من تحديد الخيار الصحيح (وعرضه في النموذج)، ظل الإدخال غير صالح (نانوغرام البكر و نانوغرام غير صالح الفصول لا تزال موجودة).

لفرض التحقق من صحة AngularJS، اتصل بـ jQuery يتغير() بعد تحديد الخيار:

$("#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) ضع هذا الكود على صفحتك الثانية (حالتي 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 خطوات ويعمل بشكل مثالي.

لماذا لا تضيف متغيرًا لمعرف العنصر وتجعله وظيفة قابلة لإعادة الاستخدام؟

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&lt;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;
}

أنت على الأرجح تريد هذا:

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

أو

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

إذا كنت تستخدم 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>';

أخشى أنني غير قادر على اختبار ذلك في الوقت الحالي، ولكن في الماضي، أعتقد أنه كان عليّ إعطاء معرف لكل علامة خيار، ثم فعلت شيئًا مثل:

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

إذا لم ينجح ذلك، فربما يجعلك أقرب إلى الحل:P

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow