CODEWITHSUNDEEP
javascriptjqueryhtmlcss
blueSky
blueSky

Reputation: 247

function works on page load but not on click

var names = [];
$(document).ready(function(){
	$('#selauth option').each(function(){
		names.push($(this).text());
	});
});

function givemefirst() {
	$('.pmarked').removeClass('pmarked');
	$('.postitle').eq(0).addClass('pmarked');
	givemestuff();
}

givemefirst();

function givemestuff() {
	let obj = $('.pmarked');
	$('.optemp').remove();
	let auth = obj.attr('data-auth');
	if (names.includes(auth)) {
		$('#selauth').val(auth);
	}
	else {
		$('#selauth').append("<option class='optemp'>" + auth + "</option>");
		$('#selauth').val(auth);
	}
}

$(document).on('click', '.postitle', function() {
	$('.pmarked').removeClass('pmarked');
	$(this).addClass('pmarked');
	givemestuff();
});
.postitle{
cursor:pointer;
}

.pmarked{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='postitle' data-auth='earth'>lorem ipsum</div>
<div class='postitle' data-auth='moon'>lorem ipsum</div>
<div class='postitle' data-auth='sun'>lorem ipsum</div>
<br>
<select id='selauth'>
<option>moon</option>
<option>sun</option>
</select>

on page load everything works fine.
i.e. option-earth is added to selauth and it is selected automatically.

Click on next postitle also works - option-earth is removed...

But click again on first postitle - selauth is blank, i.e. no option is selected, i.e. option-earth is not added!

What is wrong?

Upvotes: 0

Views: 95

Answers (3)

Prateek Sharma
Prateek Sharma

Reputation: 132

You can try below code with very small changes in your code.

Changes made -

  1. In function, givemestuff(), do not remove $(.optemp). Remove the class only.
  2. In the same function, under else section, push the auth into names array.

With this code, you are free to add only required option under select element.

Let me know for any further query.

var names = [];
$(document).ready(function(){
    $('#selauth option').each(function(){
        names.push($(this).text());
    });
});

function givemefirst() {
    $('.pmarked').removeClass('pmarked');
    $('.postitle').eq(0).addClass('pmarked');
    givemestuff();
}

givemefirst();

function givemestuff() {
    let obj = $('.pmarked');
        $('.optemp').removeClass('optemp');
    let auth = obj.attr('data-auth');
    if (names.includes(auth)) {
        $('#selauth').val(auth);
    }
    else {
        $('#selauth').append("<option class='optemp'>" + auth + "</option>");
        $('#selauth').val(auth);
                names.push(auth);
    }
}

$(document).on('click', '.postitle', function() {
    $('.pmarked').removeClass('pmarked');
    $(this).addClass('pmarked');
    givemestuff();
});

.postitle{
cursor:pointer;
}

.pmarked{
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='postitle' data-auth='earth'>lorem ipsum</div>
<div class='postitle' data-auth='moon'>lorem ipsum</div>
<div class='postitle' data-auth='sun'>lorem ipsum</div>
<br>
<select id='selauth'>
<option>moon</option>
<option>sun</option>
</select>

Upvotes: 0

Bhumi Shah
Bhumi Shah

Reputation: 9476

You just need to change it to this:

DEMO: https://codepen.io/creativedev/pen/RJYapd

var names = [];
$(document).ready(function(){
    $('#selauth option').each(function(){
        names.push($(this).text());
    });
});

function givemefirst() {
    $('.pmarked').removeClass('pmarked');
    $('.postitle').eq(0).addClass('pmarked');
    givemestuff();
}

givemefirst();

function givemestuff() {
    let obj = $('.pmarked');
  $('.optemp').remove();
    let auth = obj.attr('data-auth');  
    if ($("#selauth option[value='"+auth+"']").length > 0) {
        $('#selauth').val(auth);
    }
    else {
        $('#selauth').append("<option class='optemp' value='"+auth+"'>" + auth + "</option>");
        $('#selauth').val(auth);
    }
}

$(document).on('click', '.postitle', function() {
    $('.pmarked').removeClass('pmarked');
    $(this).addClass('pmarked');
    givemestuff();
});

Upvotes: 3

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

If you remove any temporary option from select then you also need to remove it from array names. So, I have remove temp option value from array names by conditionally :

if($('.optemp').length == 0){   
    names.splice(names.indexOf(auth), 1 );
}


var names = [];
$(document).ready(function(){
	$('#selauth option').each(function(){
		names.push($(this).text());
	});
});

function givemefirst() {
	$('.pmarked').removeClass('pmarked');
	$('.postitle').eq(0).addClass('pmarked');
	givemestuff();
}

givemefirst();

function givemestuff() {
	let obj = $('.pmarked');
	let auth = obj.attr('data-auth');
  if($('.optemp').length == 0){   
    names.splice(names.indexOf(auth), 1 );
  }
  $('.optemp').remove();
  
	if (names.includes(auth)) {
		$('#selauth').val(auth);
	}
	else {
		$('#selauth').append("<option class='optemp'>" + auth + "</option>");
		$('#selauth').val(auth);
	}
}

$(document).on('click', '.postitle', function() {
	$('.pmarked').removeClass('pmarked');
	$(this).addClass('pmarked');
	givemestuff();
});
.postitle{
cursor:pointer;
}

.pmarked{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='postitle' data-auth='earth'>lorem ipsum</div>
<div class='postitle' data-auth='moon'>lorem ipsum</div>
<div class='postitle' data-auth='sun'>lorem ipsum</div>
<br>
<select id='selauth'>
<option>moon</option>
<option>sun</option>
</select>

Upvotes: 1

Related Questions