راکت
راکت
بازگشت به پرسش و پاسخ‌ها
حل شده

مشکل در نمایش select2 در فرم های پویا

13 پاسخ

من داخل سایتم از دکمه ای برای اضافه کردن select2 استفاده میکنم (با js )
بخاطر تعداد بالای option حتما باید حالت سرچ داشته باشه ، به طور پش فرض سرچ داره اما وقتی داخل قسمت js قرارش میدم که به طور داینامیک بشه اضافه یا حذفش کرد حالت سرچش غیر فعال میشه
ممنون میشم کسی راهنمایی کنه

طراحی_وبمشکلselect2فرم_پویا
مجید
مجید
@majeeddehghan
ثبت پرسش جدید

پاسخ‌ها

13
محمدجواد
محمدجواد
@mohamadj072
بهترین پاسخ

سلام
بعد از کدهاتون یکبار دیگه مجددا باید select2() رو اجرا کنید.
موردتون رو کاملا روی لوکال تست کردم و جواب میده.


<!DOCTYPE html>
<html>
<head>
    <link href="https://roocket.ir/{{ asset('css/select2.min.css') }}" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="{{ asset('js/select2.full.min.js')}}"></script>

    <script>
        $(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".input_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID

            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    var option = $("select").html();
                    $(wrapper).append('<div><input type="text" name="product_colour[]"/><select name="product_image[]" class="select2">'+option+'</select><a href="#" class="remove_field">Remove</a></div>'); //add input box
$('.select2').select2()
                }
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });
    </script>
</head>
<body>

<?php

$pic[]="yellow.jpg";
$pic[]="blue.jpg";
$pic[]="red.jpg";

?>

<form action="jq2.php" method="POST">

    <div class="input_fields_wrap">

        <button class="add_field_button">Add More Colour</button>
        <br>

        <div>
            <input type="text" name="product_colour[]">
            <select name="product_image[]" class="select2">

                <?php
                foreach ($pic as $abc){

                    echo '<option VALUE="'.$abc.'">'.$abc.'</option>';
                }
                ?>
            </select>
        </div>

    </div>
    <button>add product</button><br><br>
</form>
</body>
<script>
    $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()
    });
</script>
</html>
0
ارسال پاسخ
رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

درود...سعی کنید از select بوت استرپ 4 استفاده کنید...

0
ارسال پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

از select بوت استرپ 4 که استفاده میکنم فقط در کلمه اول option سرچ رو انجام میده
میخوام در کل option سرچ کنه
از ajax هم استفاده کردم اما کار نداد
کلا وقتی از jquery wrapper برای درج select استفاده میکنم انگار نمیتونه جاوا اسکریپ رو بخونه و کار نمیده

0
ارسال پاسخ

گفتگوهای مرتبط

شاید پاسخ شما همین‌جا باشد

مشکل در ایمپورت اطلاعات فرم به دیتابیس در php

2 پاسخ

نمایش نادرست select2

1 پاسخ

مشکل در نمایش یا عدم نمایش المنت ها در جی کوئری

بدون پاسخ

ویرایش اطلاعات با php و ajax

2 پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

<!DOCTYPE html>
<html>
<head>
    <link href="https://roocket.ir/{{ asset('css/select2.min.css') }}" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="{{ asset('js/select2.full.min.js')}}"></script>

    <script>
        $(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".input_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID

            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    var option = $("select").html();
                    $(wrapper).append('<div><input type="text" name="product_colour[]"/><select name="product_image[]" class="select2">'+option+'</select><a href="#" class="remove_field">Remove</a></div>'); //add input box
                }
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });
    </script>
</head>
<body>

<?php

$pic[]="yellow.jpg";
$pic[]="blue.jpg";
$pic[]="red.jpg";

?>

<form action="jq2.php" method="POST">

    <div class="input_fields_wrap">

        <button class="add_field_button">Add More Colour</button>
        <br>

        <div>
            <input type="text" name="product_colour[]">
            <select name="product_image[]" class="select2">

                <?php
                foreach ($pic as $abc){

                    echo '<option VALUE="'.$abc.'">'.$abc.'</option>';
                }
                ?>
            </select>
        </div>

    </div>
    <button>add product</button><br><br>
</form>
</body>
<script>
    $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()
    });
</script>
</html>
0
ارسال پاسخ
رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

0
ارسال پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

این مورد هم تست شد
برای زبان فارسی مشکل داره و داخل کلمات سرچ رو انجام نمیده در حالی که وقتی مقادیر option ها انگلیسی وارد بشن به راحتی کار میکنه و مشکلی نداره
راهی نیست که بشه این کار رو انجام داد
Select2 این کار رو به راحتی انجام میده ولی وقتی select رو با jquery wrapper درج میکنم اصلا کا نمیده
راهی نیست ک ینی واقعا؟

0
ارسال پاسخ
رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

پیوند زیر:
https://stackoverflow.com/questions/36005249/adding-search-functionality-in-select-options-using-bootstrap

جاوا اسکریپت:

$(function() {
  $('.selectpicker').selectpicker();
});

اچ تی ام ال:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />

<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <!-- /.box-header -->
        <div class="box-body">
          <form>
            <div class="form-group row">
              <label for="" class="col-sm-2 form-control-label">Country</label>
              <div class="col-sm-10">
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                <option data-tokens="china">China</option>
  <option data-tokens="malayasia">Malayasia</option>
  <option data-tokens="singapore">Singapore</option>
                </select>

              </div>
            </div>
          </form>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->```
1
ارسال پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

<!DOCTYPE html>
<html>
<head>
    <link href="https://roocket.ir/{{ asset('css/select2.min.css') }}" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="{{ asset('js/select2.full.min.js')}}"></script>

    <script>
        $(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".input_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID

            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    var option = $("select").html();
                    $(wrapper).append('<div><input type="text" name="product_colour[]"/><select name="product_image[]" class="select2">'+option+'</select><a href="#" class="remove_field">Remove</a></div>'); //add input box
                }
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });
    </script>
</head>
<body>

<?php

$pic[]="yellow.jpg";
$pic[]="blue.jpg";
$pic[]="red.jpg";

?>

<form action="jq2.php" method="POST">

    <div class="input_fields_wrap">

        <button class="add_field_button">Add More Colour</button>
        <br>

        <div>
            <input type="text" name="product_colour[]">
            <select name="product_image[]" class="select2">

                <?php
                foreach ($pic as $abc){

                    echo '<option VALUE="'.$abc.'">'.$abc.'</option>';
                }
                ?>
            </select>
        </div>

    </div>
    <button>add product</button><br><br>
</form>
</body>
<script>
    $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()
    });
</script>
</html>

کد ارسالی رو هم امتحان کردم و جایگزین jquery wrapper کردم باز به مشکل حل نشد
این بار کلا select نمایش داده نمیشه

0
ارسال پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

@endworld این کد به تنهایی کار میکنه و مشکلی نداره
اما وقتی بخوایم به صورت پویا select ها اضافه یا کم بشن کار نمیکنه و به مشکل میخوره
هرکاری کردم نشد
امکانش هست خودتون تست کنید
ممنون از راهنمایی

0
ارسال پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

@mohamadj072 من دقیقا الان همین کد رو اجرا کرددم اجرا میسه مشکلش این هست که امکان جستجو در option های select های اضافه شده وجود نداره
در حالی که در select اول که به طور پیش فرض هست این امکان وجود داره و سرچ کار میکنه
اما در sekect های بعدی غیر فعال میشه

0
ارسال پاسخ
محمدجواد
محمدجواد
@mohamadj072

@majeeddehghan بنده کاملا پروژه ی شما رو تست کردم و هیچ مشکلی نداشت
شما select2 فایل های js و css اش رو از طریق cdn لود کنید.
اینم لینک هاش:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

احتمالش هست مشکلتون از همین باشه

0
ارسال پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

@mohamadj072 ممنون از راهنمایی مشکل برطرف شد

0
ارسال پاسخ
مجید
مجید
@majeeddehghan

تخصص: برنامه نویس

@mohamadj072 من مقادیر عددی رو میخوام سرچ کنم میخوام برای سرچ کردن با موبایل و تبلت کیبورد عددی باز بشه و مقادیر عددی رو سرچ کنم
شبیه type="tel" در input
امکانش هست در این خصوص هم راهنمایی بفرمایید

0
ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام