Member Avatar for soapyillusion

Hello all,

I have a dialog window with a jqgrid. Wihin the jqgrid I have. multiple dropdows, one for each of the 50 states. And each state takes a different row. Depending on what is going on from output in a database each one of those states is to have a different option selected in their respective dropdown.

My problem is both, the select box it self has an id, and each option within the select box has its own id. Is there any function within jquery that will allow to me access the id of the selectbox and alter an attribute of an option with a different id. All in a single command?

I have tried using PHP to sovle this problem but have failed.

Any help would be apreciated.

Id post the code, but its in an MVC framework and ITS A LOT!!!

but a basic break down of how it looks goes as such:

<table>
  <tr>
     <td> New York</td>
     <td>    
        <select id ='State'>
        <option id='tax_code' value='tax_code'> </option>
      </td>
    </tr>
    </table> 

    //this is done once for each of the states!!
  • 3 Contributors
  • 5 Replies
  • 223 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by IIM

Dani AI

Generated

The most likely cause here is HTML/selector structure rather than jQuery magic: if every select uses the same id (or you put ids on option tags), browsers break the “one id = one element” rule and selectors stop behaving predictably. Make each state-select identifiable (unique id like state-NY, or better: class="state-select" data-state="NY"), keep option values as your canonical codes, and drop per-option ids unless you really need them.

A simple, robust client-side pattern (server returns a JSON map of state => chosenCode) is to loop that map and set each select by its value. Example:

// mapping returned from server: { "NY": "tax_code_2", "TX": "tax_code_3", ... }
$(function(){
  var mapping = { NY: 'tax_code_2', TX: 'tax_code_3' };

  $.each(mapping, function(state, code){
    var $sel = $('select.state-select[data-state="' + state + '"]');
    if (!$sel.length) return;
    if ($sel.find('option[value="' + code + '"]').length) {
      $sel.val(code);
    } else {
      // optional: add missing option and select it
      $sel.append($('<option>').val(code).text(code)).val(code);
    }
  });
});

If those selects live inside jqGrid cells/editors, note two important points: (1) jqGrid will often render a plain cell and only create the select when a row is edited — in that case set the value in the row data you feed the grid (so the cell displays correctly), or (2) run the mapping after the grid finishes rendering — use loadComplete, afterInsertRow, or the dialog-open callback to apply the code above. When you must update an already-loaded row, prefer setRowData/setCell so the grid’s internal data stays consistent.

Quick troubleshooting: verify the server codes exactly match option value (case-sensitive), run your code after the DOM/grid is ready, and use console.log to inspect the mapping and element selection. ’s AJAX idea is the right pattern when selections must change on user action; ’s demo is a good quick sanity-check for selectors.

Recommended Answers

All 5 Replies

Member Avatar for pixelsoul

I don't entirely understand the description. So you have a drop down with 50 states and another drop down with another list of options that you want to alter depending on which state was chosen from the first drop down?

Member Avatar for IIM

;i think he is refering to change one drop down vaue on the basis of another drop down value.
:- yes it is possible by doing ajax call.
Onchange event of first drop down make an ajax call to php page with selected value(using document.getElementById('id').value) and then in that php page on the basis of input ,get data and return back data and then populate data in second drop down.
Eg:-this

Member Avatar for soapyillusion

Sorry I wasnt descriptive, enough its kinda hard to describe.

There is table, each row represents a state and within each row is a drop down with a list of codes. Once the page is loaded, information from a database is pulled. depending upon what the database results say, the option selected in individual drop downs will change. While ones not in the database will remain on a default value.

So for instance, say the database says the state of new york is set to tax_code_2 and Texas is set to tax_code_3. SO in the table, the new york row, and texas row will have the options set respectivly. While the rest of the 48 states are still set to the default.

Im trying to figure out away to select the parent selectbox with the correct state_id and its child option. In the same command.

The best I can get is selecting either just the selectbox or its option.

Edited by soapyillusion
Member Avatar for IIM

Yes I have given solution for the same thing. You have to make ajax call on change of first select box value and populate second select box from the response of ajax call. Just check the links provided above.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.