CODEWITHSUNDEEP
jquery
user357034
user357034

Reputation: 10981

need to change attribute value

I am asking this question again but hopefully being a little more clearer. See this thread for more info

javascript error in IE8 compatibitlity mode

I have the following markup on the page of which I cannot change directly. I need to change the the function called from "change_option" to "changeoption". How can this be done for each selectbox. I have not shown the options as they are not relevant in this case.

<select onChange="change_option('SELECT___100E___7',this.options[this.selectedIndex].value)" name="SELECT___100E___7">
<select onChange="change_option('SELECT___123___6',this.options[this.selectedIndex].value)" name="SELECT___123___6">
<select onChange="change_option('SELECT___584E___52',this.options[this.selectedIndex].value)" name="SELECT___584E___52">

Upvotes: 2

Views: 470

Answers (2)

pinkfloydx33
pinkfloydx33

Reputation: 12739

$(document).ready(
function(){
    $('select').each(
        function(){
              $(this).change(
                  function() {
                      changeoption(this.name,$(this).val());
                  }
              ).attr("onchange",function(){           
                               changeoption(this.name,this.options[this.selectedIndex].value); 
                     }
              );            
        } 
    );
});

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

This seems relatively straightforward:

$(document).ready(
    function(){
        $('select').each(
            function(){
                if ($(this).attr('onChange')) {
                    var onChangeString = $(this).attr('onChange').replace('change_option','changeoption');
                    $(this).attr('onChange',onChangeString);
                }
            }
        );
    }
);

I used the following (x)html (under a <!DOCTYPE html>, using Chrome and Firefox on Ubuntu 10.10):

<form action="#" method="post">
    <select onChange="change_option('SELECT___100E___7',this.options[this.selectedIndex].value)" name="SELECT___100E___7">
        <option value="0">dummy option 1</option>
        <option value="1">dummy option 2</option>
        <option value="2">dummy option 3</option>
        <option value="3">dummy option 4</option>
    </select>
    <select onChange="change_option('SELECT___123___6',this.options[this.selectedIndex].value)" name="SELECT___123___6">
        <option value="0">dummy option 1</option>
        <option value="1">dummy option 2</option>
        <option value="2">dummy option 3</option>
        <option value="3">dummy option 4</option>
    </select>
    <select onChange="change_option('SELECT___584E___52',this.options[this.selectedIndex].value)" name="SELECT___584E___52">
        <option value="0">dummy option 1</option>
        <option value="1">dummy option 2</option>
        <option value="2">dummy option 3</option>
        <option value="3">dummy option 4</option>
    </select>
</form>

Demo at JS Fiddle.

Edited to add an afterthought: personally, I'd strongly recommend removing the onChange event from the (x)html, and place all your behavioural logic together, rather than having it strewn around your html pages (because leaving it there leads to situations like this, having to manipulate a whole bunch of elements instead of rewriting one function in one file.

If you truly can't edit the html you can always use jQuery to remove the onChange (and onClick etc.) event handlers, and use a linked js file to take over their function.

Upvotes: 2

Related Questions