سوال: مشکل تداخل جی کوئری در ارتباط چند select box [بایگانی]

hesamsword

دوشنبه 01 آذر 1395, 10:47 صبح

سلام من برای ارتباط دو select کدهای زیر پیدا کردم و به درستی هم کار میکند اما میخواهم چهار بار از دو select box استفاده و هر دوتا جدا با هم ارتباط داشته باشند و وقتی کد زیر دو بار استفاده میکنم جی کوئری ها تداخل دارن و دیگری کار نمیکنه کمی تغییرات روی نام اینا هم انجام دادم اما درست نشد خواهشا نگاهی به کدها کنید ببنید میشه کاری کرد؟؟ ممنون میشم اگر راهنمایی کنید

<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>

var sel1 = document.querySelector('#sel1');

var sel2 = document.querySelector('#sel2');

var options2 = sel2.querySelectorAll('option');

function giveSelection(selValue) {

sel2.innerHTML = '';

for(var i = 0; i < options2.length; i++) {

if(options2[i].dataset.option === selValue) {

sel2.appendChild(options2[i]);

}

}

}

giveSelection(sel1.value);

یک کد دیگر

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
<div ng-controller="MyCtrl">
<h1>Language selection</h1>
<select id="select_language" ng-init="selectedLanguage = data['English']" ng-
model="selectedLanguage" ng-options="id for (id, person) in data"></select>
<h1>Dialect and sex selection</h1>
<select id="select_dialect" ng-model="selectedLastName" ng-options="item.lastName for item in selectedLanguage"></select>
<select id="select_sex" ng-model="selectedSex" ng-options="item.sex for item in
selectedLanguage track by item.code"></select>
</div>
</div>
</body>
</html>

function MyCtrl($scope) {
$scope.data = {
"Maths": [{
"code": "John",
"lastName": "Doe",
"sex": "M"
}],
"English": [{
"code": "John",
"lastName": "Doe",
"sex": "M"
}, {
"code": "John1",
"lastName": "Doe1",
"sex": "M1"
}, {
"code": "John2",
"lastName": "Doe2",
"sex": "M2"
}]
};

$scope.selectedLanguage = $scope.data["English"];

}

ببینید کدوم راحت تره و میشه درستش کرد