donglunzai4288
2016-06-25 05:07
浏览 86
已采纳

三个相关的下拉问题

I have a form country, state and area that looks like the following:

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

I have a script that allows showing what kind of state (i.e. second dropdown) that is depending on the country selection (first dropdown). I have no problem with the first and second dropdown.

However, the problem comes when I want to include the third dropdown for the area that depends on what country and state is selected. This is the script I have for the area. The country_id and state_id are getting the same value which is apparently incorrect.

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

After spending some times on Google, I got the correct value for the country_id by changing the the following:

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

The area selection is not listing any data but this <option>Select an area</option>.

I got the following details from the Chrome's inspect->preview:

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

and Chrome's inspect->response:

<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+'
[' : '[')+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>

It seems like it is showing the correct areas from the attributes, but just isn't displaying them out under the area selection. What did I do wrong?

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzhong4222 2016-06-25 05:18
    已采纳

    Basically the procedure you have to follow is the first country id you have to send then take its respective cities until location box will be disabled then send only state id and fetch locations from that and you will get the proper result.Please refer below link

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

    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题