从属下拉值

Question

我将依赖下拉列表与 javascript 一起使用，其中其他 select 的值在前一个 selection 的基础上发生变化。我的问题是当我保存数据时它发送的是数据库中的数字而不是我想要存储实际值的实际值。

我的代码在这里；

    @extends('layout/header')
@include('layout/sidebar')

<div id="page-wrapper">
    <div class="container-fluid">

        <div class="row">
            <div class="col-md-12">
                <h1 class="motetreports_heading"></h1>
                {{-- first sequnce --}}

                <form class="form-horizontal" action="/atgardrr/{{request()->route('id')}}" method="post">
                  {{ csrf_field() }}
                  <div class="form-group">
                    <h3>Huvudkategorier</h3>
                  <select name="huvudkategori" class="form-control artgard_select" id="select1">
                  </select>
                </div>
                <div class="form-group">
                  <h3>Underkategorier 1</h3>
                  <select name="underkategorier1" class="form-control artgard_select" id="select2">
                  </select>
                </div>
                <div class="form-group">
                  <h3>Underkategorier 2</h3>
                  <select name="underkategorier2" class="form-control artgard_select" id="select3">
                  </select>
                </div>

<div style="width: 50%;" class="form-group">
  <h3>Underkategorier 3</h3>
  <input type="text" class="form-control"  name="underkategorier3" id="comment"/ >
</div> 

                      <button type="submit" style="width: 100px;margin-top:20px;" class="btn btn-primary">Skicka</button>

                      </form>




                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

                <script type="text/javascript">
var opt1 = ['Utredning/Bedömning', 'Stöd', 'Behandling', 'Funktions-/Färdighetsträning','Boende/placering', 'Kontroll/Tvångsåtgärd'],
    opt2 = [
      ['Ansökan/Egen anmälan', 'Remiss/Hänvisning', 'Anmälan av annan', 'Annat'],
      ['Praktiskt', 'Emotionellt/Socialt', 'Materiellt', 'Annan'],
      ['Social/psykosocial', 'Psykologisk', 'Medicinsk', 'Psykiatrisk', 'Annat'],
      ['ADL', 'Social färdighetsträning', 'Fysisk träning', 'Annat'],
      ['Akutboende', 'Familjehem', 'Behandlingshem', 'Stödboende', 'Tvångsvård', 'Annat'],
      ['Kontroll', 'Tvångsåtgärd', 'Annat']
    ],
    opt3 = [
      [
        ['Bedömning', 'Manualbaserat test eller samtal', 'Observation', 'Utredande samtal', 'Provtagning', 'Annat'],
        ['Bedömning', 'Manualbaserat test eller samtal', 'Observation', 'Utredande samtal', 'Provtagning', 'Annat'],
        ['Bedömning', 'Manualbaserat test eller samtal', 'Observation', 'Utredande samtal', 'Provtagning', 'Annat'],
        [ 'Specificering']
      ],
      [
        ['Råd eller Information', 'Stödjande eller Motiverande SAMTAL ', 'Stödjande eller Motiverande AKTIVITET', 'Kompensatorisk aktivitet', 'Annat' ],
        ['Råd eller Information', 'Stödjande eller Motiverande SAMTAL ', 'Stödjande eller Motiverande AKTIVITET', 'Kompensatorisk aktivitet', 'Annat' ],
        ['Ekonomiskt', 'Utrustning/Hjälpmedel', 'Produkt', 'Annat' ],
        [ 'Specificering']
      ],
      [
        ['Behandlande samtal', 'Behandlande aktivitet'],
        ['Behandlande samtal', 'Behandlande aktivitet'],
        ['Medicin', 'Behandlande samtal', 'Annan behandlande insats'],
        ['Medicin', 'Behandlande samtal', 'Annan behandlande insats'],
        [ 'Specificering']
      ],
      [
        [ 'Specificering'],
        [ 'Specificering'],
        [ 'Specificering'],
        [ 'Specificering']
      ],
      [
        [ 'Specificering'],
        [ 'Specificering'],
        [ 'Specificering'],
        ['Stödboende', 'Försöks- & träningslägenhet'],
        ['LVU', 'LVM', 'LPT', 'LRV', 'Annat'],
        [ 'Specificering']
      ],
      [
        ['Drogtest', 'Kroppsvisitation', 'Annat'],
        ['Avskiljning/Inlåsning', 'Bältesläggning', 'Annat'],
        [ 'Specificering']
      ]
    ];
jQuery(document).ready(function() {

  // populating the dropdowns when the page loads...
  jQuery.each(opt1, function(i, e) { jQuery('#select1').append('<option value="'+i+'">'+e+'</option>'); });
  jQuery.each(opt2[0], function(i, e) { jQuery('#select2').append('<option value="'+i+'">'+e+'</option>'); });
  jQuery.each(opt3[0][0], function(i, e) { jQuery('#select3').append('<option value="'+i+'">'+e+'</option>'); });

  // click events
  jQuery('body').on('change', '#select1', function() {
    jQuery('#select2, #select3').empty();
    jQuery.each(opt2[jQuery('#select1').val()], function(i, e) {
      jQuery('#select2').append('<option value="'+i+'">'+e+'</option>');
    });
    jQuery.each(opt3[jQuery('#select1').val()][jQuery('#select2').val()], function(i, e) {
      jQuery('#select3').append('<option value="'+i+'">'+e+'</option>');
    });
  });
  jQuery('body').on('change', '#select2', function() {
    jQuery('#select3').empty();
    jQuery.each(opt3[jQuery('#select1').val()][jQuery('#select2').val()], function(i, e) {
      jQuery('#select3').append('<option value="'+i+'">'+e+'</option>');
    });
  });
});

                </script>


            </div>
        </div>
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

@include('layout/footer')

在数据库中，我得到这些：

3   2   0

Answer 1

您的输入是这样创建的：

<option value="'+i+'">'+e+'</option>'

i是索引e是值。所以我认为如果您使用 e 作为 value 属性，那将起作用。

值属性通常是表单将发送到数据库的内容。

index 表示数组中的数字位置。

从属下拉值

Depended drop down values

javascript

select

jquery-selectors