Данные Javascript на странице

У меня есть веб-страница с 2 списками (элемент управления HTML). Первый список - это multi-select и содержит огромное количество элементов.Данные Javascript на странице

Когда я выбираю один или несколько элементов в первом списке, содержимое второго списка должно меняться в зависимости от выбранных значений. Эти значения должны быть взяты из базы данных. Поскольку выбор должен работать мгновенно, я должен сделать все это на стороне клиента без обратного вызова/обратной передачи. Это означает инъекцию содержимого базы данных при загрузке страницы и ее обработке с помощью JQuery.

Какой подход вы предлагаете для хранения таких данных на странице? Можете ли вы указать мне на какое-то существующее решение?

Я даже не знаю, как это сделать Google.

источник

2010-09-03 Germstorm

Вы не можете использовать технику AJAX? Он не должен загружать изначально весь контент, а только по требованию. –

К сожалению, нет. Это должен быть Javascript – Germstorm

Я хотел бы создать объект, который содержит различные элементы в массивах. Пример:

var values = { 
    cat1: ["item1", "item2", ...], 
    cat2: ["item1", "item2", ...] 
}

Всякий раз, когда элемент выбран из первого select, искать это значение с values[selectedValue], который дает вам детали для другой select коробки. Тогда вам просто нужно создать для него HTML.

источник

2010-09-03 08:08:55

Вы должны jQuery для получения данных при нажатии.

Может быть, это руководство поможет вам:
http://www.akchauhan.com/select-content-from-one-list-to-another-using-jquery/

Узнайте о JQuery здесь: http://docs.jquery.com/Tutorials

источник

2010-09-03 08:08:54 Steven

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    // Simple plugin that compares two arrays 
    jQuery.fn.compare = function(t) { 
     if (this.length != t.length) { 
      return false; 
     } 
     var a = this.sort(), 
      b = t.sort(); 
     for (var i = 0; t[i]; i++) { 
      if (a[i] !== b[i]) { 
       return false; 
      } 
     } 
     return true; 
    }; 


    // Those rules should be fetched from the server 
    var rules = [ 
     // select the first value if 1, 2 and 5 are selected 
     { value: '1', selectedValues: [ '1', '2', '5' ] }, 
     // select the second value if 2 and 4 are selected 
     { value: '2', selectedValues: [ '2', '4' ] }, 
     // select the third value if 3 is selected 
     { value: '3', selectedValues: [ '3' ] } 
    ]; 

    $(function() { 
     // whenever the selection in the multiselect box changes: 
     $('#first').change(function() { 
      // get the array of all selected elements 
      var selectedValues = $(this).val(); 

      // verify if this array matches any of the defined rules 
      $(rules).each(function(index, rule) { 
       if ($(selectedValues).compare(rule.selectedValues)) { 
        // if we have a match select the corresponding value in the second list 
        $('#second').val(rule.value); 
       } 
      }) 
     }); 
    }); 
    </script> 

</head> 
<body> 

<select multiple="multiple" id="first"> 
    <option value="1">value1</option> 
    <option value="2">value2</option> 
    <option value="3">value3</option> 
    <option value="4">value4</option> 
    <option value="5">value5</option> 
</select> 

<select id="second"> 
    <option value="1">value1</option> 
    <option value="2">value2</option> 
    <option value="3">value3</option> 
</select> 

</body> 
</html>

источник

2010-09-03 08:15:35

Данные Javascript на странице

ответ

Смежные вопросы