Mathias Bank

Nov 01 2006

jQuery-Plugin - select box manipulation

$("#myselect").selectOptions("val1");

 Loading ...

Bisher 19 Reaktionen

1. # Stevenon 30. Oktober 2007 at 1:58

   I am trying to use this code to select an option based on the Body ID.

   My code looks like this -

   $(document).ready(function() {

   var home = ‘ Corporate Cars ‘;
   var airport = ‘ Airport Transfers ‘;
   var tours = ‘ Tours ‘;
   var group = ‘ Group Transfers ‘;

   // Get the bodyid of the page
   var bodyid = $(”body”).attr(”id”);

   if (bodyid == ‘home’) {
   $(’#fm_refer’).selectOptions( home );
   }

   else if (bodyid == ‘airport’) {
   $(’#fm_refer’).selectOptions( airport );
   }

   else if (bodyid == ‘tours’) {
   $(’#fm_refer’).selectOptions( tours );
   }

   else if (bodyid == ‘group’) {
   $(’#fm_refer’).selectOptions( group );
   }

   });

   I can populate a text field ok but select boxes are a lot harder!

2. # Stevenon 30. Oktober 2007 at 1:59

   I forgot to mention that my HTML looks like this -

   Corporate Cars
   Airport Transfersh
   Tours
   Group Transfers

3. # Stevenon 30. Oktober 2007 at 2:01

   Damn HTML!

   select name=”fm_refer” id=”fm_refer”

   option value=”Corporate Cars” id=”opt_corporate” Corporate Cars
   /option

   etc

   /select

4. # Mathiason 30. Oktober 2007 at 8:37

   Well, the function does not select options by id (i even don’t know, if “id” is valid for options). The selectbox value is selected by _value_.

5. # Kari Pätiläon 31. Oktober 2007 at 14:59

   Have you tested this on Safari? It’s not working for me with v.3.0.3. The script works fine on Firefox, though.

6. # Kari Pätiläon 31. Oktober 2007 at 15:40

   Just figured out the problem with Safari.

   First, you need to add “this.options[i].selected = false;” inside the for loop.

   After that you have to wait for Apple to fix this, since even though the option value is correctly changed, the Safari UI doesn’t reflect the change in any way.

7. # Laurent Belloeilon 26. November 2007 at 11:24

   I found a bug in the “selectOptions” function. The value “v” is not accessible in the “each” function. To correct this, replace line 305:
   function()
   with
   function(v)

   OS : WinXP
   browser: FF2
   Debugged with Firebug

8. # edsonon 21. Januar 2008 at 19:09

   when options in select are just number this will not comply:

   if(vT != “string” && vT != “function” && vT != “object”) return this;

   it should be

   if(vT != “string” && vT != “number” && vT != “function” && vT != “object”) return this;

9. # jochenon 25. Januar 2008 at 12:10

   hello there,

   you’re part of work for TexoTela’s plugin for jQuery is excellent. i’m using it in a small project for myself. currently i’ve got a problem i couldn’t solve until now.

   i’m using xmlhttp-requests to manipulate select-boxes. in dependency of a specific value the boxes are refilled with a reduced set of options. this works very fine.

   now the problem: using firefox as browser, the box is shown with the first value of the database query as expected. but i’m not able to get this behaviour for ie. i’ve tried to select the first value using selectOptions, but neither with the value nor using a regular expression works. ie still shows the last entry of the database query.

   here’s the code:

   function getbox(urlstring, boxname) {
   $(’#’ + boxname).empty();
   $.get(urlstring, function(data) {
   if (data.length > 0) {
   res_array = data.split(’|');
   for (var i = 0; i

10. # jochenon 25. Januar 2008 at 12:11

    sorry, here’s the code again, in the previous entry it’s cutted…

    function getbox(urlstring, boxname) {
    $(’#’ + boxname).empty();
    $.get(urlstring, function(data) {
    if (data.length > 0) {
    res_array = data.split(’|');
    for (var i = 0; i

11. # jochenon 25. Januar 2008 at 12:13

    sorry, seems that the bracket leads to a problem, once again…
    function getbox(urlstring, boxname) {
    $(’#’ + boxname).empty();
    $.get(urlstring, function(data) {
    if (data.length GT 0) {
    res_array = data.split(’|');
    for (var i = 0; i LT res_array.length; i++) {
    options = res_array[i].split(’,');
    opt_val = options[0];
    opt_lbl = options[1];
    $(’#’ + boxname).addOption(opt_val, opt_lbl);
    $(’#’ + boxname).selectOptions(opt_lbl, true);
    }
    }
    }
    );
    $(’#’ + boxname).removeOption(”");
    $(’#’ + boxname).selectOptions(”0″);
    }

12. # Mathiason 25. Januar 2008 at 17:30

    Hi,

    ie has a lot of bugs using select boxes. The best way is to rewrite innerHTML.

13. # Jochenon 7. Februar 2008 at 19:33

    Hello Matthias,

    thanks for the hint - if I’ve got enough time, I’ll do this. Meanwhile I have to live with this buggy behaviour of ie.

    Regards

    Jochen

14. # Ryanon 25. April 2008 at 17:04

    Trying to simpy select a value using the selected value of another select.

    $(”#x_ship_to_state”).selectOptions($(”#x_state”).val());

    Can’t get it to work. If I put a string like the example it works fine. Doesn’t work once I try to use the above code.

    Any ideas? Thanks.

15. # Mathias Bankon 25. April 2008 at 21:30

    Hi,

    try to use firebug and type

    console.log($(”#x_state”).val())

    Is this really a string?

16. # Johnon 23. September 2008 at 21:36

    You could just do this:

    $(”#mySelectBox option”).removeAttr(’selected’);
    $(”#mySelectBox option[value=myvalue]”).attr(’selected’, ‘true’);

    This seems rather simple and you’ve over-complicated it.

17. # JQuery at it best!? Downloadable JQuery plugins and Widgets for you « Dogfeeds——IT Telescopeon 13. Juni 2009 at 14:47

    […] Select Box Manipulation Allows to add, delete, sort and select options in a select box. […]

18. # Immaon 5. November 2009 at 14:03

    thanks!

19. # jQuery » Select box manipulation « Developpement Informatiqueon 18. Februar 2010 at 14:44

    […] Originally coded by Mathias Bank, with a modification to allow it to take a regular expression. […]

Die Klowand wartet auf dich! Beschreib sie!