-1

私はjsonを持っています:

{
    "A": {
        "1": "1",
        "2": "2",
        "3": "3"
    }, 
    "B": {
        "4": "4",
        "5": "5",
        "6": "6"
    }, 
    "C": {
        "7": "7",
        "8": "8"
    }
}

そして2つ選択します：

<select id="main">
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

と：

<select id="sub">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

たとえば、次のようにします。

select#main で A を選択すると、select#sub で 4、5、6、7、8 が非表示になります

select#main で B を選択すると、select#sub で 1、2、3、7、8 が非表示になります

select#main で C を選択すると、select#sub で 1、2、3、4、5、および 6 が非表示になります

json の依存関係を使用します。

AJAXを使わずにどうやって作ることができますか?

4

1 に答える 1

0

オブジェクトが手元にある場合は、AJAX を使用する必要はありません。

試す

var $sub = $('#sub');
$sub.find('option:gt(0)').remove();
$('#main').on('change', function(){
     var options = opts[this.value];
    $sub.find('option:gt(0)').remove();
    var $this = $(this);
    $sub.append($.map(options, function(i, o){

        return $('<option/>', {value:i, text:o});
    }));
});

フィドル

于 2013-10-02T21:42:16.693 に答える