Mathias Bank

Nov 01 2006

jQuery-Plugin – select box manipulation

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

19 responses so far

 Loading ...

19 responses so far

1. # Stevenon 30 Okt 2007 at 1:58 am

   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 Okt 2007 at 1:59 am

   I forgot to mention that my HTML looks like this -

   Corporate Cars
   Airport Transfersh
   Tours
   Group Transfers

3. # Stevenon 30 Okt 2007 at 2:01 am

   Damn HTML!

   select name=”fm_refer” id=”fm_refer”

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

   etc

   /select

4. # Mathiason 30 Okt 2007 at 8:37 am

   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 Okt 2007 at 2:59 pm

   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 Okt 2007 at 3:40 pm

   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 Nov 2007 at 11:24 am

   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 Jan 2008 at 7:09 pm

   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 Jan 2008 at 12:10 pm

   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 Jan 2008 at 12:11 pm

    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 Jan 2008 at 12:13 pm

    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 Jan 2008 at 5:30 pm

    Hi,

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

13. # Jochenon 07 Feb 2008 at 7:33 pm

    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 Apr 2008 at 5:04 pm

    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 Apr 2008 at 9:30 pm

    Hi,

    try to use firebug and type

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

    Is this really a string?

16. # Johnon 23 Sep 2008 at 9:36 pm

    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 Jun 2009 at 2:47 pm

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

18. # Immaon 05 Nov 2009 at 2:03 pm

    thanks!

19. # jQuery » Select box manipulation « Developpement Informatiqueon 18 Feb 2010 at 2:44 pm

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

Hinterlasse eine Antwort