Question

我有一个表单国家，州和地区，如下所示：

<div class="form-group{{ $errors->has('country') ? ' has-error' : '' }}">
                <label for="inputCountry" class="col-lg-2 control-label">Country*</label>
                <div class="col-lg-6">
                <select class="form-control" name="country" id="country">
                    <option value="">Select a country</option>
                    @foreach ($countries as $country)
                        <option value="{{ $country->id }}">{{ $country->country }}</option>
                    @endforeach
                </select>
            </div>
</div>

<div class="form-group{{ $errors->has('state') ? ' has-error' : '' }}">
            <label for="state" class="col-lg-2 control-label">State*</label>
            <div class="col-lg-6">
                <select class="form-control" name="state" id="state">
                </select>
            </div>
 </div>

<div class="form-group{{ $errors->has('area') ? ' has-error' : '' }}">
            <label for="inputPassword" class="col-lg-2 control-label">Area*</label>
            <div class="col-lg-6">
                <select class="form-control" name="area" id="area">
                </select>
            </div>
</div>

我有一个脚本，允许显示哪种状态（即第二个下拉列表）取决于国家选择（第一个下拉列表）。我对第一次和第二次下拉没有问题。

然而，当我想要包含取决于所选国家和州的区域的第三个下拉列表时，问题就出现了。这是我在该地区的剧本。 country_id和state_id获得的值相同，显然是不正确的。

<script>
$('#state').on('change', function(e) {
        console.log(e);

        var country_id = e.target.value;              <---- not sure what I should change for this.
        var state_id = e.target.value;

        //ajax

        $.get("/page/ajax?country_id="+country_id+"&state_id="+state_id, function (data) {
            //console.log(data);
            $('#area').empty();
            $('#area').append('<option>Select an area</option>');
            $.each(data, function(index, areaObj) {

                $('#area').append('<option value="'+areaObj.id +'">'+ areaObj.name +'</option>');
            });

        });

    });
</script>

在Google上花了一些时间后，我通过更改以下内容获得了country_id的正确值：

var country_id = e.target.value;至var country_id = $('select[name="country"]').val();

区域选择不会列出任何数据，只有<option>Select an area</option>。

我从Chrome的检查 - ＆gt;预览中获得了以下详细信息：

Collection {#261
  #items: array:2 [
    0 => Area {#260
      #fillable: array:3 [
        0 => "area"
        1 => "state_id"
        2 => "country_id"
      ]
      +timestamps: false
      #connection: null
      #table: null
      #primaryKey: "id"
      #perPage: 15
      +incrementing: true
      #attributes: array:2 [
        "id" => 3
        "name" => "Corvallis"
      ]
      #original: array:2 [
        "id" => 3
        "name" => "Corvallis"
      ]
      #relations: []
      #hidden: []
      #visible: []
      #appends: []
      #guarded: array:1 [
        0 => "*"
      ]
      #dates: []
      #dateFormat: null
      #casts: []
      #touches: []
      #observables: []
      #with: []
      #morphClass: null
      +exists: true
      +wasRecentlyCreated: false
    }
    1 => Area {#270
      #fillable: array:3 [
        0 => "area"
        1 => "state_id"
        2 => "country_id"
      ]
      +timestamps: false
      #connection: null
      #table: null
      #primaryKey: "id"
      #perPage: 15
      +incrementing: true
      #attributes: array:2 [
        "id" => 7
        "name" => "Portland"
      ]
      #original: array:2 [
        "id" => 7
        "name" => "Portland"
      ]
      #relations: []
      #hidden: []
      #visible: []
      #appends: []
      #guarded: array:1 [
        0 => "*"
      ]
      #dates: []
      #dateFormat: null
      #casts: []
      #touches: []
      #observables: []
      #with: []
      #morphClass: null
      +exists: true
      +wasRecentlyCreated: false
    }
  ]
}

和Chrome的检查 - ＆gt;响应：

<script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl', addEventListener = function (e, n, cb) { e.addEventListener(n, cb, false); }; (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle); if (!doc.addEventListener) { addEventListener = function (element, eventName, callback) { element.attachEvent('on' + eventName, function (e) { e.preventDefault = function () {e.returnValue = false;}; e.target = e.srcElement; callback(e); }); }; } function toggle(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass; if ('sf-dump-compact' == oldClass) { arrow = '&#9660;'; newClass = 'sf-dump-expanded'; } else if ('sf-dump-expanded' == oldClass) { arrow = '&#9654;'; newClass = 'sf-dump-compact'; } else { return false; } a.lastChild.innerHTML = arrow; s.className = newClass; if (recursive) { try { a = s.querySelectorAll('.'+oldClass); for (s = 0; s < a.length; ++s) { if (a[s].className !== newClass) { a[s].className = newClass; a[s].previousSibling.lastChild.innerHTML = arrow; } } } catch (e) { } } return true; }; return function (root) { root = doc.getElementById(root); function a(e, f) { addEventListener(root, e, function (e) { if ('A' == e.target.tagName) { f(e.target, e); } else if ('A' == e.target.parentNode.tagName) { f(e.target.parentNode, e); } }); }; function isCtrlKey(e) { return e.ctrlKey || e.metaKey; } addEventListener(root, 'mouseover', function (e) { if ('' != refStyle.innerHTML) { refStyle.innerHTML = ''; } }); a('mouseover', function (a) { if (a = idRx.exec(a.className)) { try { refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}'; } catch (e) { } } }); a('click', function (a, e) { if (/\bsf-dump-toggle\b/.test(a.className)) { e.preventDefault(); if (!toggle(a, isCtrlKey(e))) { var r = doc.getElementById(a.getAttribute('href').substr(1)), s = r.previousSibling, f = r.parentNode, t = a.parentNode; t.replaceChild(r, a); f.replaceChild(a, s); t.insertBefore(s, r); f = f.firstChild.nodeValue.match(indentRx); t = t.firstChild.nodeValue.match(indentRx); if (f && t && f[0] !== t[0]) { r.innerHTML = r.innerHTML.replace(new RegExp('^'+f[0].replace(rxEsc, '\\$1'), 'mg'), t[0]); } if ('sf-dump-compact' == r.className) { toggle(s, isCtrlKey(e)); } } if (doc.getSelection) { try { doc.getSelection().removeAllRanges(); } catch (e) { doc.getSelection().empty(); } } else { doc.selection.empty(); } } }); var indentRx = new RegExp('^('+(root.getAttribute('data-indent-pad') || ' ').replace(rxEsc, '\\$1')+')+', 'm'), elt = root.getElementsByTagName('A'), len = elt.length, i = 0, t = []; while (i < len) t.push(elt[i++]); elt = root.getElementsByTagName('SAMP'); len = elt.length; i = 0; while (i < len) t.push(elt[i++]); root = t; len = t.length; i = t = 0; while (i < len) { elt = root[i]; if ("SAMP" == elt.tagName) { elt.className = "sf-dump-expanded"; a = elt.previousSibling || {}; if ('A' != a.tagName) { a = doc.createElement('A'); a.className = 'sf-dump-ref'; elt.parentNode.insertBefore(a, elt); } else { a.innerHTML += ' '; } a.title = (a.title ? a.title+'\n[' : '[')+keyHint+'+click] Expand all children'; a.innerHTML += '<span>&#9660;</span>'; a.className += ' sf-dump-toggle'; if ('sf-dump' != elt.parentNode.className) { toggle(a); } } else if ("sf-dump-ref" == elt.className && (a = elt.getAttribute('href'))) { a = a.substr(1); elt.className += ' '+a; if (/[\[{]$/.test(elt.previousSibling.nodeValue)) { a = a != elt.nextSibling.id && doc.getElementById(a); try { t = a.nextSibling; elt.appendChild(a); t.parentNode.insertBefore(a, t); if (/^[@#]/.test(elt.innerHTML)) { elt.innerHTML += ' <span>&#9654;</span>'; } else { elt.innerHTML = '<span>&#9654;</span>'; elt.className = 'sf-dump-ref'; } elt.className += ' sf-dump-toggle'; } catch (e) { if ('&' == elt.innerHTML.charAt(0)) { elt.innerHTML = '&hellip;'; elt.className = 'sf-dump-ref'; } } } } ++i; } }; })(document); </script> <style> pre.sf-dump { display: block; white-space: pre; padding: 5px; } pre.sf-dump span { display: inline; } pre.sf-dump .sf-dump-compact { display: none; } pre.sf-dump abbr { text-decoration: none; border: none; cursor: help; } pre.sf-dump a { text-decoration: none; cursor: pointer; border: 0; outline: none; }pre.sf-dump{background-color:#fff; color:#222; line-height:1.2em; font-weight:normal; font:12px Monaco, Consolas, monospace; word-wrap: break-word; white-space: pre-wrap; position:relative; z-index:100000}pre.sf-dump .sf-dump-num{color:#a71d5d}pre.sf-dump .sf-dump-const{color:#795da3}pre.sf-dump .sf-dump-str{color:#df5000}pre.sf-dump .sf-dump-cchr{color:#222}pre.sf-dump .sf-dump-note{color:#a71d5d}pre.sf-dump .sf-dump-ref{color:#a0a0a0}pre.sf-dump .sf-dump-public{color:#795da3}pre.sf-dump .sf-dump-protected{color:#795da3}pre.sf-dump .sf-dump-private{color:#795da3}pre.sf-dump .sf-dump-meta{color:#b729d9}pre.sf-dump .sf-dump-key{color:#df5000}pre.sf-dump .sf-dump-index{color:#a71d5d}</style><pre class=sf-dump id=sf-dump-981673028 data-indent-pad="  "><abbr title="Illuminate\Database\Eloquent\Collection" class=sf-dump-note>Collection</abbr> {<a class=sf-dump-ref>#261</a><samp>
  #<span class=sf-dump-protected title="Protected property">items</span>: <span class=sf-dump-note>array:2</span> [<samp>
    <span class=sf-dump-index>0</span> => <abbr title="App\Models\Area" class=sf-dump-note>Area</abbr> {<a class=sf-dump-ref>#260</a><samp>
      #<span class=sf-dump-protected title="Protected property">fillable</span>: <span class=sf-dump-note>array:3</span> [<samp>
        <span class=sf-dump-index>0</span> => "<span class=sf-dump-str title="4 characters">area</span>"
        <span class=sf-dump-index>1</span> => "<span class=sf-dump-str title="8 characters">state_id</span>"
        <span class=sf-dump-index>2</span> => "<span class=sf-dump-str title="10 characters">country_id</span>"
      </samp>]
      +<span class=sf-dump-public title="Public property">timestamps</span>: <span class=sf-dump-const>false</span>
      #<span class=sf-dump-protected title="Protected property">connection</span>: <span class=sf-dump-const>null</span>
      #<span class=sf-dump-protected title="Protected property">table</span>: <span class=sf-dump-const>null</span>
      #<span class=sf-dump-protected title="Protected property">primaryKey</span>: "<span class=sf-dump-str title="2 characters">id</span>"
      #<span class=sf-dump-protected title="Protected property">perPage</span>: <span class=sf-dump-num>15</span>
      +<span class=sf-dump-public title="Public property">incrementing</span>: <span class=sf-dump-const>true</span>
      #<span class=sf-dump-protected title="Protected property">attributes</span>: <span class=sf-dump-note>array:2</span> [<samp>
        "<span class=sf-dump-key>id</span>" => <span class=sf-dump-num>3</span>
        "<span class=sf-dump-key>name</span>" => "<span class=sf-dump-str title="9 characters">Corvallis</span>"
      </samp>]
      #<span class=sf-dump-protected title="Protected property">original</span>: <span class=sf-dump-note>array:2</span> [<samp>
        "<span class=sf-dump-key>id</span>" => <span class=sf-dump-num>3</span>
        "<span class=sf-dump-key>name</span>" => "<span class=sf-dump-str title="9 characters">Corvallis</span>"
      </samp>]
      #<span class=sf-dump-protected title="Protected property">relations</span>: []
      #<span class=sf-dump-protected title="Protected property">hidden</span>: []
      #<span class=sf-dump-protected title="Protected property">visible</span>: []
      #<span class=sf-dump-protected title="Protected property">appends</span>: []
      #<span class=sf-dump-protected title="Protected property">guarded</span>: <span class=sf-dump-note>array:1</span> [<samp>
        <span class=sf-dump-index>0</span> => "<span class=sf-dump-str>*</span>"
      </samp>]
      #<span class=sf-dump-protected title="Protected property">dates</span>: []
      #<span class=sf-dump-protected title="Protected property">dateFormat</span>: <span class=sf-dump-const>null</span>
      #<span class=sf-dump-protected title="Protected property">casts</span>: []
      #<span class=sf-dump-protected title="Protected property">touches</span>: []
      #<span class=sf-dump-protected title="Protected property">observables</span>: []
      #<span class=sf-dump-protected title="Protected property">with</span>: []
      #<span class=sf-dump-protected title="Protected property">morphClass</span>: <span class=sf-dump-const>null</span>
      +<span class=sf-dump-public title="Public property">exists</span>: <span class=sf-dump-const>true</span>
      +<span class=sf-dump-public title="Public property">wasRecentlyCreated</span>: <span class=sf-dump-const>false</span>
    </samp>}
    <span class=sf-dump-index>1</span> => <abbr title="App\Models\Area" class=sf-dump-note>Area</abbr> {<a class=sf-dump-ref>#270</a><samp>
      #<span class=sf-dump-protected title="Protected property">fillable</span>: <span class=sf-dump-note>array:3</span> [<samp>
        <span class=sf-dump-index>0</span> => "<span class=sf-dump-str title="4 characters">area</span>"
        <span class=sf-dump-index>1</span> => "<span class=sf-dump-str title="8 characters">state_id</span>"
        <span class=sf-dump-index>2</span> => "<span class=sf-dump-str title="10 characters">country_id</span>"
      </samp>]
      +<span class=sf-dump-public title="Public property">timestamps</span>: <span class=sf-dump-const>false</span>
      #<span class=sf-dump-protected title="Protected property">connection</span>: <span class=sf-dump-const>null</span>
      #<span class=sf-dump-protected title="Protected property">table</span>: <span class=sf-dump-const>null</span>
      #<span class=sf-dump-protected title="Protected property">primaryKey</span>: "<span class=sf-dump-str title="2 characters">id</span>"
      #<span class=sf-dump-protected title="Protected property">perPage</span>: <span class=sf-dump-num>15</span>
      +<span class=sf-dump-public title="Public property">incrementing</span>: <span class=sf-dump-const>true</span>
      #<span class=sf-dump-protected title="Protected property">attributes</span>: <span class=sf-dump-note>array:2</span> [<samp>
        "<span class=sf-dump-key>id</span>" => <span class=sf-dump-num>7</span>
        "<span class=sf-dump-key>name</span>" => "<span class=sf-dump-str title="8 characters">Portland</span>"
      </samp>]
      #<span class=sf-dump-protected title="Protected property">original</span>: <span class=sf-dump-note>array:2</span> [<samp>
        "<span class=sf-dump-key>id</span>" => <span class=sf-dump-num>7</span>
        "<span class=sf-dump-key>name</span>" => "<span class=sf-dump-str title="8 characters">Portland</span>"
      </samp>]
      #<span class=sf-dump-protected title="Protected property">relations</span>: []
      #<span class=sf-dump-protected title="Protected property">hidden</span>: []
      #<span class=sf-dump-protected title="Protected property">visible</span>: []
      #<span class=sf-dump-protected title="Protected property">appends</span>: []
      #<span class=sf-dump-protected title="Protected property">guarded</span>: <span class=sf-dump-note>array:1</span> [<samp>
        <span class=sf-dump-index>0</span> => "<span class=sf-dump-str>*</span>"
      </samp>]
      #<span class=sf-dump-protected title="Protected property">dates</span>: []
      #<span class=sf-dump-protected title="Protected property">dateFormat</span>: <span class=sf-dump-const>null</span>
      #<span class=sf-dump-protected title="Protected property">casts</span>: []
      #<span class=sf-dump-protected title="Protected property">touches</span>: []
      #<span class=sf-dump-protected title="Protected property">observables</span>: []
      #<span class=sf-dump-protected title="Protected property">with</span>: []
      #<span class=sf-dump-protected title="Protected property">morphClass</span>: <span class=sf-dump-const>null</span>
      +<span class=sf-dump-public title="Public property">exists</span>: <span class=sf-dump-const>true</span>
      +<span class=sf-dump-public title="Public property">wasRecentlyCreated</span>: <span class=sf-dump-const>false</span>
    </samp>}
  </samp>]
</samp>}
</pre><script>Sfdump("sf-dump-981673028")</script>

它似乎是从属性中显示正确的区域，但只是不在区域选择下显示它们。我做错了什么？

Answer 1

基本上，您必须遵循的程序是您必须发送的第一个国家/地区ID，然后选择相应的城市，直到位置框将被禁用，然后仅发送状态ID并从中获取位置，您将获得正确的结果。请参阅以下链接

http://www.codexworld.com/dynamic-dependent-select-box-using-jquery-ajax-php/

三个相关的下拉问题

1 个答案: