مجید

4 سال پیش توسط مجید مطرح شد

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

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

ثبت پرسش جدید

محمدجواد

@mohamadj072 4 سال پیش مطرح شد

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


<!DOCTYPE html>
<html>
<head>
    <link href="{{ 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>

ارسال پاسخ

رایموند

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

@Raymond 4 سال پیش مطرح شد

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

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

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

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

<!DOCTYPE html>
<html>
<head>
    <link href="{{ 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>

ارسال پاسخ

رایموند

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

@Raymond 4 سال پیش مطرح شد

درود...
پیوند های زیر:
https://stackoverflow.com/questions/45007712/bootstrap-4-dropdown-with-search
https://developer.snapappointments.com/bootstrap-select/examples/

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

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

ارسال پاسخ

رایموند

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

@Raymond 4 سال پیش مطرح شد

پیوند زیر:
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 -->```

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

<!DOCTYPE html>
<html>
<head>
    <link href="{{ 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 نمایش داده نمیشه

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

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

ارسال پاسخ

محمدجواد

@mohamadj072 4 سال پیش مطرح شد

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


<!DOCTYPE html>
<html>
<head>
    <link href="{{ 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>

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

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

ارسال پاسخ

محمدجواد

@mohamadj072 4 سال پیش مطرح شد

@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>

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

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

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

ارسال پاسخ

مجید

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

@majeeddehghan 4 سال پیش مطرح شد

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

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

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

گزینش سوالات

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

دسته ‌بندی سوالات

تگ‌های محبوب

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