0

Hello Im new to Html/Java(script/query)/css, around half year.
I have few question.
Right now Im trying to make a function/code that doing this:I have 2 radio buttons.
clicking on the 1st radio button selects the 1st option, and removing the others.
while clicking on the 2nd radio buttons open up the other options and removing the first option that dedicating it self to the first radio button.

<form  enctype="multipart/form-data">
    <fieldset>
        <legend>מפרט טכני של הסמארטפון:</legend>
        <label for="memory">זיכרון פנימי:</label>
        <input id="less1" type="radio" value="less" name="memory" onclick="(myFun())" /> פחות מ 1GB
        <input id="more1" type="radio" value="more" name="memory" onclick="(myFun1())" />מעל 1GB
        <br />
        <label for="extra">אפשרות להרחבת זיכרון:</label>
        <br />
        <select size="5" id="sel">
            <option name="extra" value="no1" id="no">לא</option>
            <option name="extra" value="yes8">כן,8GB</option>
            <option name="extra" value="yes16">כן,16GB</option>
            <option name="extra" value="yes32">כן,32GB</option>
            <option name="extra" value="yes64">כן,64GB</option>
        </select>
        </fieldset>
</form>


        function myFun() {
        $("#sel").prop('size', "1")
        select('option', $("no")).select('option:not(:selected)').remove()         
    }
    function myFun1() {
        $("#sel").prop('size',"4")
    }

I have checke another topic here and it helpd me little bit (jQuery on change only shows the selected option, remove/disable rest of them)

Community
  • 1
  • 1
Orchan Magramov
  • 9
  • 5
  • I'm trying to understand what you want to do. So, if you click the first radio button you want to set as selected the first option and hide the others, and if you click the second radio button, show the hidden options and hide the first one. Is that correct? – abaracedo Mar 31 '15 at 18:45
  • Yes exactly. thats what I wanted – Orchan Magramov Mar 31 '15 at 19:04

1 Answers1

0

That's the code that does what you want. I removed the select() event because that event is triggered when the text is selected using the mouse.

It's better to hide/show the elements instead remove them.

function myFun() {

    // 1. Find the first option and set as selected
    $("#sel").find('option').first().prop("selected",true)
    // 2. Find its not selected siblings and hide it
    .siblings('option:not(:selected)').hide();

    // 3. The first radio button is selected, so show the first option
    $("#no").show();

}

function myFun1() {

    // 1. Find the last option, set as selected and show it
    $("#sel").find('option').last().prop("selected",true).show()
    // 2. Find its siblings and show them
    .siblings('option:not(:selected)').show();

    // 3. Hide the first option
    $("#no").hide();

}
abaracedo
  • 1,404
  • 5
  • 26
  • 45
  • can you add comments? ( // *text*//) to explain me what the rest of the text that you had add is doing? I know what it does, but explantion would help me to the future stuff – Orchan Magramov Mar 31 '15 at 19:11
  • Nice thanks mate.// edit is coming // I have another question. if I remove $("#sel").find('option').last().prop("selected",true).show() then it shows the option without selcting the last one. but also when I press the 1st radio button then switch to the second it shows only scroll bar. why? and how I can do that it will show the 4 option without selelcting the last one? – Orchan Magramov Mar 31 '15 at 19:18
  • I managed to do my willing . $("#sel").find('option').show().siblings('option:not(:selected)').show(); i changed it to this – Orchan Magramov Mar 31 '15 at 19:22