انتخاب یک گزینه در دراپ داون با انتخاب دراپ دان دیگر در لاراول

سلام
کد شما مربوط به لاراول نمیشه
و جاوا اسکریپتیه
الان با لپتاب کدشو براتون مینویسم

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

const dropdown1 = document.querySelector("yourSelector");
const dropdown2 = document.querySelector("yourSelector");
dropdown1.addEventListener('change' , function () { 
    if (dropdown1.value == "myValue"){
        dropdown2.value = "myValue2";
    }
})

ممنون، من به این شکل کد زده بودم ولی کار نکرد.
فکر کردم در لاراول ممکنه فرق داشته باشه.

سلام
گاها مجبور میشی option:selected رو پیدا کنی و بعد value بگیری
کد من با jquery هست اما کارش قابل درکه اگر به جواب نرسیدی این روش رو هم تست کن برای من اینجوری جواب میده.

$('#mySelectBoxId1 option:selected').val()=='choose')

و برای تغییر دراپ داون دیگه ممکنه مجبور شی همون option رو اول پیدا کنی و بعد attr و یا prop رو تغییر بدی

mySelectBoxId2.find(`option[value="myCustomValue"]`).prop('selected',true)

دلیلی که find گزاشتم چون از یک سلکت باکس دیگری استفاده میکنم که کد من رو زیبا تر کنه و چندین div و المنت تو در تو داره شما از روش اول هم میتونی عمل پیدا کردن اون option که مد نظرته رو انجام بدی و بعد اون رو select کنی
همیشه توی مراحل console.log بگیر ببین میتونی اون option یا value مورد نظر خودت رو به دست بیاری و دسترسی داری بهش یا نه

سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨

اینجا یه مثال با استفاده از JavaScript و jQuery براتون بزنم که متوجه بشین چطوری انجام میشه

<select id="dropdown1">
    <!-- داخل این دراپ‌داون مقادیر مورد نظر خود را قرار دهید -->
    <option value="1">مقدار 1</option>
    <option value="2">مقدار 2</option>
</select>

<select id="dropdown2">
    <!-- داخل این دراپ‌داون مقادیر مورد نظر خود را قرار دهید -->
    <option value="1">مقدار 1</option>
    <option value="2">مقدار 2</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // اطمینان حاصل کنید که دراپ‌داون اولیه انتخاب شده باشد
        $("#dropdown1").change(function () {
            if ($(this).val() === "1") {
                // اگر دراپ‌داون اولیه value=1 انتخاب شد، دراپ‌داون دوم را به value=2 تنظیم کنید
                $("#dropdown2").val("2");
            } else {
                // در غیر این صورت، دراپ‌داون دوم را به value=1 تنظیم کنید
                $("#dropdown2").val("1");
            }
        });

        // همچنین، اگر دراپ‌داون دوم تغییر کند، می‌توانید دراپ‌داون اول را به تطابق با آن تنظیم کنید.
        $("#dropdown2").change(function () {
            if ($(this).val() === "1") {
                $("#dropdown1").val("1");
            } else {
                $("#dropdown1").val("2");
            }
        });
    });
</script>

این کد JavaScript با استفاده از jQuery دو دراپ‌داون را کنترل می‌کنه. وقتی دراپ‌داون اول تغییر کنه، بر اساس مقدار انتخاب شده، دراپ‌داون دوم به تطابق با آن تنظیم می‌شه و بالعکس. برای این کار، ما از رویدادهای change دراپ‌داون‌ها استفاده کردم

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹

سلام.
من این کار رو علاوه بر قسمت جاوااسکریپت که دوستان اشاره کردن با ارسال درخواست ajax انجام دادم به این صورت که یک تابع در جاوااسکریپت تعریف میکنیم و تابع رو روی onchange اون select قرار میدیم، زمانه که گزینه ای از select box انتخاب میشه اون تابع جاوااسکریپتی اجرا میشه.
حالا توی اون تابع اول میای مقدار اون گزینه ای که انتخاب شده رو میگیری، بعد با درخواست ajax اون مقدار رو به متد مد نظر توی controller مورد نظر میفرستی، بر اساس اون مقدار، مقدار دومی که توی select box دومی داری رو میگیری و بعد در خروجی اون متد در controller بر میگردونی.
حالا توی متد success در درخواست ajax اون selectbox دومی رو میسازی و مقدار های دوم رو توش قرار میدی.
البته این کار واسه زمانیه که یک ارتباطی بین مقادیر select box اول با select box دوم وجود داشته باشه.
اگر اینطور بود و خواستی بگو مثالش رو با کد برات بفرستم

این کل کد من هست برای این بخش دراپ داون ها
اول توی دراپ داون اول مقداری که value آن ۱ هست رو select میکنم
توی بعدی اونی که value اش ۲ هست رو select میکنم

حالا میخوام اگر کاربر دراپ داون اول رو باز کرد و option دوم که value اش ۲ هست رو انتخاب کرد
در دراپ داون دوم ، گزینه اول انتخاب بشود

من کدهام رو توی فانکشن sameCurrencyCheck(); نوشتم که وقتی dropdown تغییر میکنه اجرا میشه

من کدهایی که گفتین رو امتحان کردم ولی جواب نداد

<form class="exchange-form" method="POST" action="{{ route('user.exchange.start') }}" id="exchange-form">
    @csrf
    <div class="form-group w-100 sendData">
        <label>@lang('You Send')</label>
        <input type="number" step="any" name="sending_amount" id="sending_amount" class="form--control" placeholder="0.00" value="{{ old('sending_amount') }}"  required>
        <select class="select-bar form--control" name="sending_currency" id="send">
           <!-- <option value="" selected focus option>@lang('Select Currency')</option> -->
            @foreach ($sellCurrencies as $sellCurrency)
             <option data-image="{{ getImage(getFilePath('currency') . '/' . @$sellCurrency->image, getFileSize('currency')) }}" data-min="{{ getAmount($sellCurrency->minimum_limit_for_buy) }}" data-max="{{ getAmount($sellCurrency->maximum_limit_for_buy) }}" data-buy="{{ getAmount($sellCurrency->buy_at) }}" data-currency="{{ @$sellCurrency->cur_sym }}" value="{{ $sellCurrency->id }}" 
               @if (old('sending_currency') == $sellCurrency->id)
                   selected
                @elseif(@$exchangeFormData['sending_currency'] == $sellCurrency->id)
                    selected

@elseif(1== $sellCurrency->id)
 selected

                @endif>
                    {{ __($sellCurrency->name) }}
                </option>
            @endforeach
        </select>

        <span class="limit-alert d-none" id="currency-limit"></span>
    </div>

    <div class="form-group receiveData w-100">
        <label for="receive">@lang('You Get')</label>
        <input type="number" step="any" name="receiving_amount" class="form--control" id="receiving_amount" value="{{ old('receiving_amount') }}" placeholder="@lang('0.00')">
        <select class="select-bar form--control" name="receiving_currency" id="receive">
             <!--<option value="" selected disabled>@lang('Select Currency')</option>-->
           @foreach ($buyCurrencies as $buyCurrency)
               <option data-image="{{ getImage(getFilePath('currency') . '/' . @$buyCurrency->image, getFileSize('currency')) }}" data-sell="{{ getAmount($buyCurrency->sell_at) }}" data-currency="{{ @$buyCurrency->cur_sym }}" value="{{ $buyCurrency->id }}" data-min="{{ getAmount($buyCurrency->minimum_limit_for_sell) }}" data-max="{{ getAmount($buyCurrency->maximum_limit_for_sell) }}" data-reserve="{{ getAmount($buyCurrency->reserve) }}"
                @if (old('receiving_currency') == $buyCurrency->id)
                    selected
                @elseif(@$exchangeFormData['receiving_currency'] == $buyCurrency->id)
                    selected

@elseif(2== $buyCurrency->id)
 selected

                @endif>
                    {{ __($buyCurrency->name) }} 
                </option>
            @endforeach
        </select>
        <span class="limit-alert d-none" id="currency-limit-received"></span>
    </div>

    <div class="form-group w-100">
       <!-- <button type="submit" class="btn--base btn">@lang('Exchange')</button> -->
    </div>
</form>

@push('script')
    <script>
        "use strict";
        (function($) {

            let sendId, sendMinAmount, sendMaxAmount, sendAmount, sendCurrency, sendCurrencyBuyRate;
            let receivedId, receivedAmount, receivedCurrency, receiveCurrencySellRate ;

            const EXCHANGE_FORM = $('#exchange-form');

            @if (old('sending_currency') || @$exchangeFormData)
                sendAmount = "{{ old('sending_amount')}}";
                @if(@$exchangeFormData['sending_amount'])
                    sendAmount = "{{ @$exchangeFormData['sending_amount'] }}";
                @endif
                sendAmount = parseFloat(sendAmount);
                $("#sending_amount").val(sendAmount.toFixed("{{$general->show_number_after_decimal}}"));
                setTimeout(() => {
                    $('#send').trigger('change');
                });
            @endif

            @if (old('receiving_currency') || @$exchangeFormData)
                receivedAmount = "{{ old('receiving_amount')}}";
                @if(@$exchangeFormData['receiving_amount'])
                    receivedAmount = "{{ @$exchangeFormData['receiving_amount'] }}";
                @endif
                receivedAmount=parseFloat(receivedAmount);
                $("#receiving_amount").val(receivedAmount.toFixed("{{$general->show_number_after_decimal}}"));
                setTimeout(() => {
                    $('#receive').trigger('change');
                });
            @endif

document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(() => {
                    $('#send').trigger('change');
                });
 setTimeout(() => {
                    $('#receive').trigger('change');
                });
});

            EXCHANGE_FORM.on('change', '#send', function(e) {
                sendId = parseInt($(this).val());
                sendMinAmount = parseFloat($(this).find(':selected').data('min'));
                sendMaxAmount = parseFloat($(this).find(':selected').data('max'));
                sendCurrency = $(this).find(':selected').data('currency');
                sendCurrencyBuyRate = parseFloat($(this).find(':selected').data('buy'));

                $("#currency-limit").removeClass('d-none').text(`Limit: ${sendMinAmount.toFixed(2)} - ${sendMaxAmount.toFixed(2)} ${sendCurrency}`);

               sameCurrencyCheck()
                calculationReceivedAmount();
            }).change();

            EXCHANGE_FORM.on('change', '#receive', function(e) {
                receivedId = parseInt($(this).val());
                receiveCurrencySellRate = parseFloat($(this).find(':selected').data('sell'));
                receivedCurrency = $(this).find(':selected').data('currency');

                let minAmount = parseFloat($(this).find(':selected').data('min'));
                let maxAmount = parseFloat($(this).find(':selected').data('max'));
                let reserveAmount = parseFloat($(this).find(':selected').data('reserve'))

                $("#currency-limit-received").removeClass('d-none').text(`Limit: ${minAmount.toFixed(2)} - ${maxAmount.toFixed(2)} ${receivedCurrency} | Reserve ${reserveAmount.toFixed(2)} ${receivedCurrency}`);

                sameCurrencyCheck();
                calculationReceivedAmount();
            });

            EXCHANGE_FORM.on('input', '#sending_amount', function(e) {
                this.value = this.value.replace(/^\.|[^\d\.]/g, '');
                sendAmount = parseFloat(this.value);

                calculationReceivedAmount();
            });

            EXCHANGE_FORM.on('input', '#receiving_amount', function(e) {

                if (!sendId) {
                    this.value = this.value.replace('');
                    return false;
                }

                this.value = this.value.replace(/^\.|[^\d\.]/g, '');
                receivedAmount = parseFloat(this.value);

               // sameCurrencyCheck();
                calculationSendAmount();
            });

         const sameCurrencyCheck = () => {
           const receiveSelect = document.getElementById("receive");
           if (sendId == 2) {
               receiveSelect.value = '1';
           }
         }

            const calculationReceivedAmount = () => {

                if (!sendId && !receivedId && !sendCurrencyBuyRate && !receiveCurrencySellRate) {
                    return false;
                }
                let amountReceived = (sendCurrencyBuyRate / receiveCurrencySellRate) * sendAmount;
                $("#receiving_amount").val(amountReceived.toFixed(2))
            }

            const calculationSendAmount = () => {

                if (!sendId && !receivedId && !sendCurrencyBuyRate && !receiveCurrencySellRate) {
                    return false;
                }
                let amountReceived = (receiveCurrencySellRate / sendCurrencyBuyRate) * receivedAmount;
                $("#sending_amount").val(amountReceived.toFixed(2))
            }

        })(jQuery);
    </script>
@endpush

سلام
به جای :selected از option:selected استفاده کنید .
به جای خط زیر

receivedId = parseInt($(this).val());

به روش زیر عمل کنید.

receivedId = parseInt($(this).find('option:selected').val());

شما داده ی min رو در attr به نام data-min قرار دادید پس به شکل زیر عمل کنید.

receiveCurrencySellRate = parseFloat($(this).find('option:selected').attr('data-min'));

لطفا در مرحله ی اول همه ی parseint و parsefloat ها رو حذف کنید
به ترتیب بعد از هر متغییر console.log() قرار بدید و برامون از کنسول اسکرین شات بزارید اگر مشکلتون حل نشد مثل کد زیر

receivedId = $(this).find('option:selected').val();
console.log('received id : ' , receivedId)
console.log('-------------------------------')
receiveCurrencySellRate = $(this).find('option:selected').attr('data-min');
console.log('receiveCurrencySellRate  : ' , receiveCurrencySellRate)
console.log('-------------------------------')