سؤال عن تغيير قيمة textbox بتغيير قيمة selectbox value باستخدام jQuery

محمد المصري12 · 22 يوليو 2021

سلام عليكم

الكود كالتالي



<div class="col-12 mb-2 row d-flex align-items-center buttons-fields">

<div class="col-9"  style="margin-bottom:20px">
<lable class="h5 text-primary m7md1" style="margin-bottom:20px">اختيار الزر</lable>
<div class="input-group">


<select class="form-control buttons-value accessory-select p-0 " required>

<option selected disabled>تحديد الزر</option>

<?php

$result = $conn->query("SELECT * FROM button");

while ($row = $result->fetch_assoc()) {

if (empty($row['name'])){
echo '<option type="buttons" img="' . $row['image'] . '" value="' . $row['id'] . '">كود رقم B' . $row['id'] . '/لم يتم تسجيل إسم شائع</option>';   
}
else {

echo '<option class="text-danger" type="buttons" img="' . $row['image'] . '" value="' . $row['id'] . '">كود رقم B' . $row['id'] . '/ الاسم الشائع - ' . $row['name'] . '</option>';
}

}

?>

</select>

</div>

</div>

<!-- ##### عرض الصورة -->

<div class="col-3 d-flex justify-content-center "  style="margin-bottom:20px"></div>

<!-- ########################## -->

<div class="col-3" style="margin-bottom:30px">
<lable>العدد في القطعة الملبسية</lable>
<div class="input-group">

<input type="text" class="form-control com_name  ">

</div>

</div>

<div class="col-3" style="margin-bottom:30px">
<lable>اختيار لون المرياج</lable>
<div class="input-group">

<select class="form-control  p-0 " id="name" name="name" required>

<option selected disabled>اختيار اللون</option>

<!-- بداية استعلام الوان المرياجات -->

<?php

$meriag = "SELECT `patron_colors`.`id` AS pcID, `patron_colors`.`patron_id` AS pcPID, `patron_colors`.`color_name` AS pcCN, `patron_colors`.`color_count`AS pcCC FROM `patron_colors` INNER JOIN `patron` ON `patron`.`id` = `patron_colors`.`patron_id` INNER JOIN `orders` ON `orders`.`id` = `patron`.`order_id` WHERE `orders`.`id` =$order_id";

$result = $conn->query($meriag);

while ($row = $result->fetch_assoc()) {


echo '<option class="text-danger color_count" type="buttons"  value="' . $row['pcCC'] . ' ">  ' . $row['pcCN'] . '</option>';

}

?>

</select>

</div>

</div>

<div class="col-2" style="margin-bottom:30px">
<lable>العدد</lable>
<div class="input-group">

<input type="text" class="form-control" id="firstname" name="firstname"  readonly="readonly">



</div>

</div>



<div class="col-3" style="margin-bottom:30px">
<lable>المجموع</lable>
<div class="input-group">

<input type="text" class="form-control com_name ">

</div>

</div>

</div>

القائمة المسماه name

<select class="form-control  p-0 " id="name" name="name" required>

نتيجة ال options تخرج من قاعدة البيانات كالتالي

<option selected disabled>اختيار اللون</option>

<!-- بداية استعلام الوان المرياجات -->

<?php

$meriag = "SELECT `patron_colors`.`id` AS pcID, `patron_colors`.`patron_id` AS pcPID, `patron_colors`.`color_name` AS pcCN, `patron_colors`.`color_count`AS pcCC FROM `patron_colors` INNER JOIN `patron` ON `patron`.`id` = `patron_colors`.`patron_id` INNER JOIN `orders` ON `orders`.`id` = `patron`.`order_id` WHERE `orders`.`id` =$order_id";

$result = $conn->query($meriag);

while ($row = $result->fetch_assoc()) {


echo '<option class="text-danger color_count" type="buttons"  value="' . $row['pcCC'] . ' ">  ' . $row['pcCN'] . '</option>';

}

?>

و عندي textbox اسمه العدد

<div class="col-2" style="margin-bottom:30px">
<lable>العدد</lable>
<div class="input-group">

<input type="text" class="form-control" id="firstname" name="firstname"  readonly="readonly">



</div>

</div>

انا عايز قيمة ال textbox ده تاخد ال value اللي في ال options بتاعة ال selectbox

مش الtext لأ عاوز ال value

و ده الكود المستخدم

<script>
$(document).ready(function() {



$("#name").live("change", function() {

    $("#firstname").val($(this).find("option:selected").attr("value"));
});
});
</script>

بس للاسف لم يعمل معي ، محتاج المساعدة مع الشكر

سمير عبود · 22 يوليو 2021

بتاريخ منذ ساعة مضت قال محمد المصري5:

للاسف لم تضبط معي غير باستخدام الكود التالي

<script>

function ChooseContact(data) {

document.getElementById ("friendName").value = data.value;

}

</script>

السؤال الان وريته لحضرتك بتطبيق عملي في الفيديو القصير ده

2021-07-22_16-11-13.mp4

ازاي اقدر احل المشكلة دي

سبب المشكلة أنك تستخدم الخاصية id و هذه الخاصية يجب أن تكون فريدة أي لا يُمكن إعطاء نفس القيمة لعناصر مختلفة.

في مثل هذه الحالات يُمكنك عمل traversing إنطلاقاً من عنصر ما لتحديد عُنصر بجوار أو أب للعنصر الذي أطلق الحدث و بعد تحديد العُنصر المطلوب يُمكنك تغيير قيمته و تتم عملية الإنتقال لتحديد العُنصر حسب هيكلية العناصر لديك فالأمر نسبي سأعطيك مثال و في البداية سأعطي قائمة الألوان صنف التنسيقات color-select و سأعطي حقل العدد صنف التنسيقات number-input و سأفترض أن كل من القائمة و حقل العدد موجودان في نفس الأب و هذا مثال بسيط يُوضح العملية:

نفترض لدينا الهيكلية التالية:

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
  <input type="text" name="firstname" class="number-input">
</div>
<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
  <input type="text" name="firstname" class="number-input">
</div>
<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
  <input type="text" name="firstname" class="number-input">
</div>

حيث حقل الإدخال يأتي مباشرة بعد القائمة لذلك يُمكن الإنتقال من القائمة إليه بإستخدام الدالة next كما هو موضح:

$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
    $(this).next().val($(this).val()); 
  });
});

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

يُمكنك تجربة المثال من هنا:

لنفترض الآن أن القائمة و حقل الإدخال ليس لديهما نفس الأب المباشر مثلاً بهذا الشكل:

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>

  <div>
    <input type="text" name="firstname" class="number-input">
  </div>
</div>

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>

  <div>
    <input type="text" name="firstname" class="number-input">
  </div>
</div>

<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>

  <div>
    <input type="text" name="firstname" class="number-input">
  </div>
</div>

في هذه الحالة يُمكنك على سبيل المثال تحديد حقل العدد الموافق بهذه الطريقة:

$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
    $(this).parent().children().find('input.number-input').val($(this).val()); 
  });
});

تستطيع تجربة المثال من هنا:

و هنالك عدة دوال توفرها مكتبة جيكويري تُساعدك في الإنتقال يُمكنك إستخدامها على حسب هيكلية العناصر لديك: التنقل بين العناصر في jQuery على موسوعة حسوب.

سمير عبود · 22 يوليو 2021

إستخدم الدالة on بدل live لأن هذه الأخيرة تم إهمالها و إستبدالها ب on لاحظ المثال التالي:

<select name="name" id="name">
  <option value="" disabled>Select option</option>
  <option value="value1">option 1</option>
  <option value="value2">option 2</option>
  <option value="value3">option 3 </option>
</select>
<input type="text" name="firstname" id="firstname">

<script>
  
  $(document).ready(function() {
    $("#name").on("change", function() {
      $("#firstname").val($(this).val());
    });
});
  
</script>

و هو يعمل بشكل جيد يُمكنك تجربته على codepen:

محمد المصري12 · 22 يوليو 2021

للاسف لم تضبط معي غير باستخدام الكود التالي

function ChooseContact(data) {

document.getElementById ("friendName").value = data.value;

}

</script>

السؤال الان وريته لحضرتك بتطبيق عملي في الفيديو القصير ده

2021-07-22_16-11-13.mp4

ازاي اقدر احل المشكلة دي

محمد المصري12 · 23 يوليو 2021

طيب وضحت الفكرة ، بس معلش اتعبك للمرة الاخيرة ، انا قريت دوال التنقل بس ما ظبطتش معايا يمكن بسبب قلة الخبرة

الان زي ما حضرتك شايف انا مقسم الكود ل 3 حاويات

div رئيسي شايل ال select و ال input

و عدد 2 div فرعي واحد شايل ال select و التاني شايل ال inputازاي اظبط دالة الانتقال عشان اخليه يقرا ال input من ال div الخاصة بها

<!-- Main Container -->
<div>
<!-- Select Box Container -->
<div>
  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
<!-- Select Box Container Close -->
  </div>
<!-- text Input Container -->
  <div>
    <input type="text" name="firstname" class="number-input">
<!-- Close text Input Container -->
  </div>

<!-- Close Main Container -->
</div>

  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
<!-- Select Box Container Close -->
  </div>
<!-- text Input Container -->
  <div>
    <input type="text" name="firstname" class="number-input">
<!-- Close text Input Container -->
  </div>

<!-- Close Main Container -->
</div>

  <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
<!-- Select Box Container Close -->
  </div>
<!-- text Input Container -->
  <div>
    <input type="text" name="firstname" class="number-input">
<!-- Close text Input Container -->
  </div>

<!-- Close Main Container -->
</div>

انا جربت اكرر استدعاء القسم الفرعي من خلال تكرار دالة children

$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
    $(this).parent().children().children().find('input.number-input').val($(this).val()); 
  });
});

لكن لم تضبط

محمد المصري12 · 23 يوليو 2021

شكرا لك اخي

بعد البحث و القراءة ضبطت معي بهذه الطريقة


$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
$(this).closest(".buttons-fields").find('input.number-input').val($(this).val()); 
  });
});

اقوم بوضع class للحاوية الرئيسيه و استدعيه ثم اقوم باستدعاء اي شئ من توابعه

سؤال عن تغيير قيمة textbox بتغيير قيمة selectbox value باستخدام jQuery

السؤال

محمد المصري12

5 أجوبة على هذا السؤال

Recommended Posts

سمير عبود

سمير عبود

محمد المصري12

محمد المصري12

محمد المصري12

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية