function fn (event) {
document.getElementById('txtpurpose').value = event.value;
}<div class="row">
<div class="col-md-12">
<form name="purpose" id="purpose1">
<select class="selsm-3 inblock-3 select2" name="purpose" id="purpose" onchange="fn(this)">
<option value="">Select</option>
<optgroup label="Portfolio" class="purpose">
<option value="Indian Portfolio">S0001</option>
<option value="Investment abroad">S0002</option>
</optgroup>
<optgroup label="Investments" class="purpose">
<option value="Indian Direct">S0003</option>
<option value="debt shares">S0004</option>
<option value="Purchase">S0005</option>
</optgroup>
</select>
</form>
</div>
</div>
<div class="col-md-12 pad-top">
<div class="form-group">
<label>Purpose Description</label>
<input type="text" class="form-control" placeholder="Min / Max 10 chars" required="" name="txtpurpose" id="txtpurpose" onClick="checkVal()">
</div>
</div>call the function fn from onchange in HTML and pass this reference to the function to access the value and use the same function to invoke the modal pop up. this will be helpful in reusing the js code instead of assigning at the start. I think this is what you were asking. If I miss understood please comment it.