Hide option from Div one if it’s selected in div 2

@BKchedliaMar 07.2017

Hi,
I have 2 div, the first one is filled with options, the actual script allow copy from the div 1 to paste in div 2 and I can copy the same element many times, but I don’t want to duplicate the same element,
THis is my HTML:

[code=html]<div class=”ms2side__div”> <div class=”ms2side__select”><select title=”” name=”Sortable_171_sx” id=”Sortable_171_sx” size=”8″ multiple=”multiple”> <option value=”1550″ selected=”selected”>Stop selling the product</option> <option value=”1551″>Continue selling the product</option> <option value=”1552″>Communicate the success of the product internally</option> <option value=”1553″>Investigate appropriateness of new customer demographic</option> <option value=”1554″>Re-brief and re-train</option> </select></div><div class=”ms2side__options” style=”padding-top: 31px;”> <p class=”AddOne” title=”Add Selected”>›</p><p class=”AddAll” title=”Add All”>»</p> <p class=”RemoveOne ms2side__hide” title=”Remove Selected”>‹</p><p class=”RemoveAll” title=”Remove All”>«</p> </div> <div class=”ms2side__select”><select title=”” name=”Sortable_171_dx” id=”Sortable_171_dx” size=”8″ multiple=”multiple”> <option value=”1551″>Continue selling the product</option> <option value=”1553″>Investigate appropriateness of new customer demographic</option> <option value=”1550″>Stop selling the product</option> <option value=”1550″>Stop selling the product</option> </select></div><div class=”ms2side__updown” style=”padding-top: 31.5px;”> <p class=”SelSort” title=”Sort”>Sort</p><p class=”MoveTop ms2side__hide” title=”Move on top selected option”>Top</p><p class=”MoveUp ms2side__hide” title=”Move up selected option”>Up</p> <p class=”MoveDown ms2side__hide” title=”Move down selected option”>Down</p><p class=”MoveBottom ms2side__hide” title=”Move on bottom selected option”>Bottom</p></div></div>[/code]

We can see that in DIV 2 , “Stop seeling the product” item appears many time,
so I want to hide from div one the selected and copied (to div 2) item, so that I have no duplicate in DIV 2
This is my script :

~~[URL=”https://drive.google.com/open?id=0B6nhIMB-ueBhd01qeUZNUDNLbkk”]~~https://drive.google.com/open?id=0B6nhIMB-ueBhd01qeUZNUDNLbkk[/URL]

to post a comment

JavaScript

3 Comments(s) _↴

@wbportMar 07.2017 — #This sudoku solver has an About div, Entry div, and Solver div--check the code to see how visibility is handled when moving from one mode to another. Sudoku.htm

This is the relevant code:

[CODE]function showPage(sPage, bShow)
 {
 var div = document.getElementById(sPage);
 div.style.visibility = bShow ? 'visible' : 'hidden';
 div.style.position = bShow ? 'static' : 'absolute';
 }
 function setPage(sPage)
 {
 showPage('start', sPage == 'start');
 showPage('details', sPage == 'details');
 showPage('solver', sPage == 'solver');
 showPage('about', sPage == 'about');
 }[/CODE]

@BKchedliaauthorMar 09.2017 — #This sudoku solver has an About div, Entry div, and Solver div--check the code to see how visibility is handled when moving from one mode to another. Sudoku.htm

This is the relevant code:

[CODE]function showPage(sPage, bShow)
 {
 var div = document.getElementById(sPage);
 div.style.visibility = bShow ? 'visible' : 'hidden';
 div.style.position = bShow ? 'static' : 'absolute';
 }
 function setPage(sPage)
 {
 showPage('start', sPage == 'start');
 showPage('details', sPage == 'details');
 showPage('solver', sPage == 'solver');
 showPage('about', sPage == 'about');
 }[/CODE]

The function [B]setPage[/B] is called with the name of the [B]div[/B] and that will be the only visible div once it has called [B]showPage[/B] with each of the div's.

Also, check out the author's own notes, the link is in the About option.[/QUOTE]

Sorry but I couldn't follow your explanation.

the part that I want to hide is not a div but an option from div one that already exists in div 2

@rootMar 10.2017 — #Sorry but I couldn't follow your explanation.

the part that I want to hide is not a div but an option from div one that already exists in div 2[/QUOTE]

Basically what this

function showPage(sPage, bShow)
 {
 var div = document.getElementById(sPage);
 div.style.visibility = bShow ? 'visible' : 'hidden';
 div.style.position = bShow ? 'static' : 'absolute';
 }
 function setPage(sPage)
 {
 showPage('start', sPage == 'start');
 showPage('details', sPage == 'details');
 showPage('solver', sPage == 'solver');
 showPage('about', sPage == 'about');
 }

is doing is ...

function showPage(sPage, bShow)
 {
 var div = document.getElementById(sPage);
 div.style.visibility = bShow ? 'visible' : 'hidden';
 div.style.position = bShow ? 'static' : 'absolute';
 }
 function setPage(sPage)
 {
 showPage('start', sPage == 'start'); // if sPage == 'start' then value passed will be true
 showPage('details', sPage == 'details');
 showPage('solver', sPage == 'solver');
 showPage('about', sPage == 'about');
 }

so [B]setPage("start"); [/B] will make that element visible and all the others invisible, to make an element hide and all the others show, just reverse the logic of the passed boolean evaluation. It means in programming terms, this is what happens if sPage is "start"

<i>
 </i>function setPage(sPage)
 {
 showPage('start', true');
 showPage('details', false);
 showPage('solver', false);
 showPage('about', false);
 }

The showPage function has two parameters, this being the page and the boolean evaluation

function showPage(sPage, bShow)
 {
 var div = document.getElementById(sPage);
 div.style.visibility = bShow ? 'visible' : 'hidden';
 div.style.position = bShow ? 'static' : 'absolute';
 }

this gets the DIV element by its ID, then based on the bShow variable bool value, evaluates "visible" if true and "hidden" if false, similar for the style positioning.

Does that clarify what the functions are doing? It should help you determine a method of getting items hidden or not hidden on your HTML.

Also in #JavaScript _↴

Getting the same index with Math.random image doesn't popup and disable drop-down box until it's checked new DOM element not receiving focus

Success!

Help @BKchedlia spread the word by sharing this article on Twitter...

Tweet This

Hide option from Div one if it’s selected in div 2

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Hide option from Div one if it’s selected in div 2

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴