اذهب إلى المحتوى
  • 0

إسناد قيمة لعنصر قائمة li من عنصر إدخال input باستخدام جافاسكربت وجيكويري Js jQuery

Our World عالمنا

السؤال

أريد أن أضغط على <li>  فيكون ما بداخلها من نص قيمة  value  لعنصر اخر (input  في هذا المثال)

يوجد لدي اثنين من القوائم غير المرتبة <ul>  بداخل كل منهما <li>  ؛ عند الضغط على الـ <li> الاولى تعمل جيدا ويكون ما بداخلها من نص قيمة للـ  (input  ) الاول أما الثانية فيكون ما بداخلها من نص قيمة للـ (input  ) الاول والثاني معا.. والصحيح ان تكون الاولى للأول والثانية للثاني: هذه هى الاكواد

الجزء الاول:

<input class="choose" id="choose" value="choose" readonly=""> <!--<span ></span></div>-->
              <ul class="ul show-cats "  id="select-cat" name="cat">
                 <!--<li class='nav-cats' value="0"><?php //echo $lang['allCategories']?></li>-->
             <?php if(!empty($cats)){  
                 if($l=='ar'){
                     foreach ($cats as $catt) {
                     echo "<li  class='nav-cats'  value=".$catt["cat_id"].">".$catt['nameAR']."</li>";
                  }}else{
                      foreach ($cats as $catt) {
                     echo "<li  class='nav-cats'  value=".$catt["cat_id"].">".$catt['name']."</li>";
                  }}
               }
              //get sub
             ?> </ul> <?php
              ?> 
              <ul class="ul select-sub " id="select-sub"  name="sub">
                   <li  style="list-style: none;" value="0"><?php echo $lang['allSubCats']?></li>   
             </ul>        
               </ul>            

الجزء الثاني:

<input class="choose2" id="choose2" value="choose2" read> <!--<span ></span></div>-->
               <ul class="ul select-state"  id="state" name="st">
                    <li value="0"><?php echo $lang['allstates']?></li>    
                 <?php if (!empty($states)){ 
                     if($l=='ar'){
                        foreach ($states as  $state) {
                         echo "<li class='nav-cats-states' value='".$state['state_id']."'>".$state['state_nameAR']."</li>";
                    }}else{
                        foreach ($states as  $state) {
                         echo "<li class='nav-cats-states' value='".$state['state_id']."'>".$state['state_name']."</li>";
                    }}
                   }else{ 
                     echo "<li>".$lang['noSearch']."</li>";
                   } ?>
                </ul>
                <!--get cities-->
                <ul class="ul select-city" id="city" name="ci">
                  <li class='subCatNavLi liCity' value="0"><?php echo $lang['allcities']?></li>
                </ul>            

jquery

خاص بالجزء الاول:

$('.subCatNavLi').click(function() {
  $('#choose').val($(this).text());
  $('.show-cats,.select-sub').hide();
});

خاص بالجزء الثاني:

$('.liCity').click(function() {

  $('#choose2').val($(this).text());
  $('.select-state,.select-city').hide();
});

ajax

$(document).ready(function(){
                  //ajax call to get subcats in search page
                 $(".nav-cats").on("mouseover", function(){
                var subcatNav=$(this).val();
                var L=$('.lng').val();
                $.ajax({
                url:"showSearch2.php",
                data:{sentSubcatNav:subcatNav,l:L},
                success: function(data){                             
                  $('#select-sub').html(data);
                    }
                  });
                });
                  //ajax call to get cities in search page
                   $(".nav-cats-states").on("mouseover", function(){
                  var State=$(this).val();
                  var Country=$("#hidden-country").val();
                  var L=$('.lng').val();
                      $.ajax({
                      url:"getCity.php",
                      data:{state:State,country:Country,l:L},
                      success: function(data){                             
                        $("#city").html(data);
                         }
                       });
                    });

     

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

هل تقصد أن ما يقوم به هذا الجزء يتم تطبيقه على كلا الحقلين input؟

$('#choose2').val($(this).text());

.. انتبه أن لديك مستمعي أحداث يتنصتان على نفس العنصر li

$('.subCatNavLi').click(function() {
$('.liCity').click(function() {

=>  <li class='subCatNavLi liCity'
               ^^^^^^^^^^^ ^^^^^^

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 36 دقائق مضت قال Wael Aljamal:

هل تقصد أن ما يقوم به هذا الجزء يتم تطبيقه على كلا الحقلين input؟


$('#choose2').val($(this).text());

.. انتبه أن لديك مستمعي أحداث يتنصتان على نفس العنصر li


$('.subCatNavLi').click(function() {
$('.liCity').click(function() {

=>  <li class='subCatNavLi liCity'
               ^^^^^^^^^^^ ^^^^^^

 

هذا ليس سبب المشكلة .. الكلاس SubCatNavLi مشترك أما الثاني فهو خاص بعنصر واحد

بتاريخ 4 دقائق مضت قال Our World عالمنا:

هذا ليس سبب المشكلة .. الكلاس SubCatNavLi مشترك أما الثاني فهو خاص بعنصر واحد

نعم ..ما يقوم به الجزء الثاني بالذات يتم تطبيقه على الجزئين معا

والجزء الثاني تم استدعاؤه بكود أجاكس ..ليس هو الذي يظهر امامك فى الـ HTML

تم التعديل في بواسطة Our World عالمنا
زيادة توضيح
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 29 دقائق مضت قال Our World عالمنا:

هذا ليس سبب المشكلة .. الكلاس SubCatNavLi مشترك أما الثاني فهو خاص بعنصر واحد

نعم ..ما يقوم به الجزء الثاني بالذات يتم تطبيقه على الجزئين معا

غريب، لأن # choose2# غير مشترك، حاول تغيير الأسماء id 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...