انتخاب خودکار از لیست استان، شهرستان، شهر های ایران با جاوااسکریپت یا جیکئوری

برای انتخاب خودکار از لیست استان، شهرستان و شهر های ایران، می توانید از کتابخانه هایی مانند Select2 یا Chosen استفاده کنید. این کتابخانه ها امکان ایجاد یک لیست انتخابی با قابلیت جستجو و فیلترینگ دارند که کاربر می تواند به راحتی از آن ها استفاده کند. به عنوان مثال، برای استفاده از کتابخانه Select2، می توانید کد زیر را در قسمت head صفحه خود قرار دهید:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

سپس می توانید یک select با id مشخص ایجاد کنید و از کتابخانه Select2 استفاده کنید:

<select id="citySelect"></select>
<script>
$(document).ready(function() {
    $('#citySelect').select2({
        placeholder: 'Select a city'
    });
});
</script>

در این کد، select با id "citySelect" ایجاد شده است و با استفاده از کتابخانه Select2، به یک لیست انتخابی تبدیل شده است. همچنین، با استفاده از placeholder، یک پیام راهنما برای کاربر نمایش داده شده است. برای افزودن گزینه های انتخابی به لیست، می توانید از دیتای JSON استفاده کنید و آن را به select اضافه کنید:

<select id="citySelect"></select>
<script>
$(document).ready(function() {
    $('#citySelect').select2({
        placeholder: 'Select a city',
        ajax: {
            url: 'https://example.com/cities.json',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;

                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatCity, // omitted for brevity, see the source of this page
        templateSelection: formatCitySelection // omitted for brevity, see the source of this page
    });

    function formatCity (city) {
        if (city.loading) {
            return city.text;
        }

        var $city = $(
            '<span>' + city.name + ' - ' + city.state + '</span>'
        );

        return $city;
    }

    function formatCitySelection (city) {
        return city.name || city.text;
    }
});
</script>

در این کد، با استفاده از ajax، دیتای JSON از یک url خاص بارگیری می شود و به لیست اضافه می شود. همچنین، با استفاده از توابع formatCity و formatCitySelection، فرمت گزینه های انتخابی و مقدار انتخاب شده توسط کاربر تغییر می کند