如何動態顯示與 select 選項相關的輸入字段中的值

Question

每當從 select 框中選擇一個選項時，我都會嘗試在輸入字段中獲取值。 目前，每當我選擇 select 選項時，都會顯示相關值，但它是 select 選項格式。 我只想要它在輸入字段中。

這是我的 HTML

<select class="form-control" name="organisation" id="mainpage">
    <option selected="">Select</option>
    @foreach($users as $k=>$u)
        @if($u->created_by == $userId)
           <option value="{{ $u->id }}" id="{{ $u->id }}">{{ $u->name }}</option>
        @endif
    @endforeach
</select>

我只是希望下面的選擇框會出現在輸入字段中。

<select class="form-control" id="mainsection" required>
    <option>--Select--</option>
    @foreach($users as $k=>$u)
        @if($u->created_by == $userId)
            <option value="{{ $u->user_id }}" data-parent="{{ $u->id }}">{{ $u->user_id }}</option>                             
        @endif
    @endforeach
</select>

這是我的腳本：

<script type="text/javascript">
    jQuery("select#mainpage").on('change',function () {     
        jQuery("select#mainsection").find('option').css('display', 'none');
        var idclassurl = jQuery("select#mainpage :selected").attr('id')
        jQuery("select#mainsection").find('option[data-parent="'+idclassurl+'"]').css('display', 'block');
    });
</script>

Answer 1

更改此代碼

<select class="form-control" id="mainsection" required>
    <option>--Select--</option>
    @foreach($users as $k=>$u)
        @if($u->created_by == $userId)
            <option value="{{ $u->user_id }}" data-parent="{{ $u->id }}">{{ $u->user_id }}</option>                             
        @endif
    @endforeach
</select>

使用此代碼

<div class="form-control" id="mainsection">
    @foreach($users as $k=>$u)
        @if($u->created_by == $userId)
            <input id="{{ $u->user_id }}" data-parent="{{ $u->id }}" value="{{ $u->user_id }}">                             
        @endif
    @endforeach
</div>

並將您的腳本更改為

<script type="text/javascript">
    jQuery("select#mainpage").on('change',function () {     
        jQuery("#mainsection").find('input').css('display', 'none');
        var idclassurl = jQuery("select#mainpage :selected").attr('id')
        jQuery("#mainsection").find('input[data-parent="'+idclassurl+'"]').css('display', 'block');
    });
</script>

以上解決方案是根據您已經開發的代碼概念。 還有一些其他簡單的方法。