简体   繁体   English

如何动态显示与 select 选项相关的输入字段中的值

[英]How to dynamically show the value in input field related with select option

I am trying to get the value inside input field whenever an option is selected from select box.每当从 select 框中选择一个选项时,我都会尝试在输入字段中获取值。 For now, whenever I select an option, the related values are showing but it is in select option format.目前,每当我选择 select 选项时,都会显示相关值,但它是 select 选项格式。 I just want it in input field.我只想要它在输入字段中。

Here is my HTML这是我的 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>

I just want that the below selection box will come in input field.我只是希望下面的选择框会出现在输入字段中。

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

Here is my Script:这是我的脚本:

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

change this code更改此代码

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

with this code使用此代码

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

and change your script to并将您的脚本更改为

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

Above solution is according to your already developed code concept.以上解决方案是根据您已经开发的代码概念。 There are few other easy methods too.还有一些其他简单的方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM