Javascript form dropdown to display different selections

[Myrddin]

Hello,

For a fansite I am trying to implement an easy way to find id's for items.

Basically I want the dropdownfields, here named itemsid,axesid to appear depending on the selection on the itemtype dropdown. Initially itemsid, axeside should be hidden.

<form name="frmSelect">
<select id="itemtype">
    <option value="itemsid">Items</option>
    <option value="axesid">Axe</option>
</select>
<p id="type-display">none selected</p>
<select id="itemsid" name="itemsid">
    <option value="" selected="selected"></option>
    <option value="f">Gold</option>
</select>
<select id="axesid" name="axesid">
    <option value="" selected="selected"></option>
    <option value="2c672">Ancient Nord War Axe</option>
</select>
</form>
 

Sadly this is all I have at the moment since I am, at most, an apprentice to javascript.
I tried looking at webexamples, but I understand too little of Javascript to adapt it to my needs or haven't found the "right" place for it. The stuff I work on atm looks like this.
Any help would be appreciated, thanks.

[Myrddin]

<h2 style="margin-top:180px;">Create Item Links</h2>
<script type="text/javascript">
function getskcode() {
    var skcommand = "\"player.additem " + document.getElementById(document.getElementById('itemtype').value).value + " " + document.getElementById('amount').value + "\" or: \"player.placeatme " + document.getElementById(document.getElementById('itemtype').value).value + " " + document.getElementById('amount').value + "\" to place the object at your feet";
    document.getElementById("display").innerHTML = skcommand;
}
function itemtype() {
    var i=1;
    for (i=1;i<=18;i++)
    {
        obj1 = document.getElementById("i");
        obj.style.visibility = 'hidden';
    }
    obj2 = document.getElementById('itemtype').value;
    document.getElementById(obj2).style.visibility = 'visible';
}
</script>
Once more this tool is work in progress!
<form name="frmSelect">
Select a category: <select id="itemtype" onchange='itemtype();'>
    <option value="1">Items</option>
    <option value="2">Axe</option>
    <option value="3">Battleaxe</option>
</select>
Select an item: <select id="1" name="1" onchange='getskcode();'>
    <option value="" selected="selected"></option>
    <option value="f">Gold</option>
    <option value="a">Lockpick</option>
</select>
<select id="2" name="2" onchange='getskcode();'>
    <option value="" selected="selected"></option>
    <option value="2c672">Ancient Nord War Axe</option>
    <option value="8adfb">Ceremonial Axe</option>
</select>
<select id="3" name="3" onchange='getskcode();'>
    <option value="" selected="selected"></option>
    <option value="1cb64">Ancient Nord Battle Axe</option>
    <option value="139b4">Daedric Battleaxe</option>
</select>
<br />
Select the number of items: <select id="amount" name="amount" onchange='getskcode();'>
    <option value="[amount]" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
 
</select>
</label>
</form>
Use this code in Skyrim's Console to receive the Item:
<p style="margin:15px 15px 30px 15px;" id="display">Use the dropdown menu to display some console commands here</p>
<p>Special thanks to <a href="http://bytes.com/profile/196795/dormilich/" target="_blank">Dormilich at bytes.com</a> for help with the script!</p>
 

Here is the script as excerpt - whole thing. The idea is, to simply hide everything and then display the one that is active.

Getskcode(); is simply the display of the selected boxes and is working properly

Thanks in advance.

[Myrddin]

The script works now, in a way ... however it does not add or remove the fields when the main selection drop down menu is being changed, I added the same command to another trigger and it works there without an issue.

<script type='text/javascript'>
function getskcode() {
    var skcommand = "player.additem " + document.getElementById(document.getElementById('itemcat').value).value + " " + document.getElementById('amount').value + "<br /><br /> or: <br /><br />player.placeatme " + document.getElementById(document.getElementById('itemcat').value).value + " " + document.getElementById('amount').value;
    document.getElementById("display").innerHTML = skcommand;
}
function itemcat() {
    var i=1;
    for (i=1;i<=28;i++)
    {
        document.getElementById('dd'+i).style.display="none";
    }
    i = document.getElementById('itemcat').value;
    document.getElementById('dd'+i).style.display="inline";
}
</script>
<select id="itemcat" onchange='itemcat()'>
    <option value="1">Items</option>
    <option value="2">Axes</option>
</select>
<span id="dd1">
    <select id="1" name="1" onchange='getskcode()'>
        <option value="" selected="selected"></option>
        <option value="f">Gold</option>
        <option value="a">Lockpick</option>
        <option value="39be5">Ultimate Healing Potion</option>
    </select>
</span>
<span id="dd2" style="display:none;">
    <select id="2" name="2" onchange='getskcode()'>
        <option value="" selected="selected"></option>
        <option value="2c672">Ancient Nord War Axe</option>
        <option value="8adfb">Ceremonial Axe</option>
    </select>
</span>
<select id="amount" name="amount" onchange='getskcode()'>
    <option value="[amount]" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<span onclick="itemcat()" class="button">Update</span>
<p style="margin:15px 15px 30px 15px;" id="display">Use the dropdown menu to display some console commands here</p>
 

The html works so far, just when I copy and paste the code into wordpress the dropdown fields do not appear. Any suggestions?

Thanks in advance

[Myrddin]

One of the Issues turned out to be Wordpress autoformat, I used a plugin called "PS Disable Auto Formatting" and then the autoformat no longer placed <p> and <br /> senseless into the javascript part and it no longer destroyed the spans.

The issue with the function

<select id="itemcat" onchange='itemcat()'>

Which is not working for some reason. I'd like some input with that. Thanks in advance.

[acoder]

Do you get any error messages?

What I would suggest is that you rename either the function itemcat() or the ID "itemcat" to something else. Perhaps there is a naming conflict.

[Myrddin]

Thanks, indeed that seemed to be the issue. Thanks!