danielfarrell / bootstrap-combobox

A combobox plugin that works with twitter bootstrap
849 stars 328 forks source link

Update the README #261

Open dee22 opened 5 years ago

dee22 commented 5 years ago

I need to use lot of dynamic access, when the page is loaded already. F.ex. Changing a combobox value by the user will trigger to reinitialize the content of an other combobox, based on the selected value in the first. Think of it like a category selection. Main category select -> subcategory select.. Further. What i still didn't found is how i can change the selected value with JQuery. The case is when i select an 'user' in the combobox, other comboboxes like 'address' and 'company' should auto select the associated values. Im sure the selected option is available (after the combobox is first initialized), but i didn't found how. So maybe you could update the README files with parameters/values for the options or an example usage for each option. That would help to easy get started.

tiesont commented 5 years ago

It's not straight-forward, but looking at the tests I came up with this: https://jsfiddle.net/mwcjLs8p/1/

<select id="test-combobox" class="combobox">
  <option></option>
  <option value="PA">Pennsylvania</option>
  <option value="CT">Connecticut</option>
  <option value="NY">New York</option>
  <option value="MD">Maryland</option>
  <option value="VA">Virginia</option>
</select>

<button type="button" id="update" class="btn btn-primary">
Set to Maryland
</button>
var $combobox = $('#test-combobox').combobox();

$('#update').on('click', function(e) {
  e.preventDefault();

 $combobox.data('combobox').$element.val('MD');
 $combobox.data('combobox').lookup();
})

Whether or not that's the easiest way, I don't know. I'll have to dig into the source a bit more.

dee22 commented 5 years ago

Thank you very much for your reply. I've tested it and it works quite well. Whit this Method, i still have to select the element by its display Text and not by its HTML value Tag which i would prefer. But it works. Whit your jQuery code it displays the filtered select list and expects a click by the user. To finally select it with jQuery i added the select function. This works well.

var $combobox = $('#test-combobox').combobox();

$('#update').on('click', function(e) {
  e.preventDefault();

 $combobox.data('combobox').$element.val('MD');
 $combobox.data('combobox').lookup();
 $combobox.data('combobox').select();
})
dee22 commented 5 years ago

I have found a solution that works for me. But it tooks me hours and the result is so simple.. Case: When i select the User, i want the Company in which he works selected automatically (by value). https://jsfiddle.net/mwcjLs8p/23/

<select id="test-trigger-combobox" class="combobox">
  <option></option>
  <option value="1">User A</option>
  <option value="2">User B</option>
  <option value="3">User C</option>
  <option value="4">User D</option>
</select>

<select id="test-target-combobox" class="combobox">
  <option></option>
  <option value="1">Company D</option>
  <option value="2">Company C</option>
  <option value="3">Company B</option>
  <option value="4">Company A</option>
</select>
$('.combobox').combobox();
var $target_combobox = $('#test-target-combobox').combobox();
var $association_ids = [0, 4, 3, 2, 1];  // user 1 belongs to company 4, user 2 to company 3...

$('#test-trigger-combobox').on('change', function(e) {
  //e.preventDefault();
  var trigger_id = $(this).val();
  var target_id = $association_ids[trigger_id];

  $target_combobox.val(target_id);
  $target_combobox.data('combobox').refresh();
})

I found the needed hint here in Bug #75 at the bottom. It would be nice if such functions where documented, or at least listed, so that i know there is more without studying the whole code of the project.