need to change attribute value

Question

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">

As an alternative, have you considered just adding function change_option(a,b) { changeoption(a,b); } to your page? I note that was suggested in your previous question. — user229044
– user229044 ♦, Commented Oct 30, 2010 at 4:04

David Thomas · Accepted Answer · 2010-10-30 01:00:37Z

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.

Thanks for you response. However we have an issue. 1- this is basically the same as the jQuery code I have in the other thread just went about it a different way. 2- there is a javascript error in IE8 compatibility mode "Object doesn't support this property or method" This is the same error I get with my version.
@user357034, then I think you need to consider filing a bug report with the jQuery folks, or with Microsoft. It may well be a documented failing of either the library or browser, but I don't have access to a Windows installation to test, sorry.
@user357034, unfortunately that isn't the question you asked, here, so I didn't think to try and answer it (and without IE, I'm not really even capable of tracking down the reason why).
I really appreciate your effort, just kinda stumped as to why this will not work right in IE. Always something with IE, damn it!!!!
@user357034; ah, welcome to the internet, young Padewan... =)

pinkfloydx33 · Accepted Answer · 2010-10-30 04:03:01Z

1

$(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); 
                     }
              );            
        } 
    );
});

answered Oct 30, 2010 at 4:03

pinkfloydx33

12.9k3 gold badges53 silver badges70 bronze badges

2 Comments

user357034 Over a year ago

Wow, this works in IE8 comp mode, I love pink floyd BTW. I just need to change the selector to $("select[name^=SELECT___]").each but it works perfectly. I need to look at this more carefully to understand how and why it works. Thanks!!!

pinkfloydx33 Over a year ago

It is slightly redundant. The .attr() and the .change() portions do the exact same thing, but to fix ie8 comp mode, its necessary to add the attr portion in.

Collectives™ on Stack Overflow

need to change attribute value

2 Answers 2

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Linked

Related